代码之家 › 专栏 › 技术社区 › JM-AGMS

使用平面阵列选择带有ng选项的默认选项

ng-options angularjs

JM-AGMS · 技术社区 · 7 年前

<option> 与…在一起 ng-options 使用平面阵列。我遇到的问题是选择我已经定义的默认选项元素。似乎是一个非常简单的任务,有吨吨类似的问题使用对象或对象数组吨,但我已经找到了一切,并试图为我的情况不工作。

<div ng-app="MyApp">
  <div ng-controller="MyCtrl">
    <select ng-options="opt as opt for opt in testOpt" data-ng-model="resultOpt">
      <option value="">Choose Category</option>
    </select>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

angular.module('MyApp', []).controller('MyCtrl', ['$scope', function ($scope) {
  $scope.testOpt = [
    'ID',
    'Name',
    'Email',
    'Address'
  ];
  $scope.resultOpt = '';
}]);

$scope.resultOpt = '' ng-init="resultOpt = ''" ,但这根本不起作用。 这对于一组对象非常有效 但不是简单的数组。我也不想脱离AngularJS框架,我不喜欢混合和匹配vanilla和AngularJS代码,事情会变得一团糟。

我发现一个现有的jsFiddle适用于angularjs1.4.8,但至少对于angularjs1.7.8,当与平面数组一起使用时,它不起作用。不确定是功能在以后的版本中被删除了,还是只是一个bug。

完整示例: https://jsfiddle.net/v4uesg02/4/

如何在默认情况下使用平面数组而不超出AngularJS框架来选择“Choose Category”选项?

1 回复 | 直到 7 年前

Community Mohan Dere 6 年前

如何选择硬编码 `null`

选择单个硬编码 <option> ,分配 无效的 对于模型:

angular.module('MyApp', []).controller('MyCtrl', ['$scope', function ($scope) {
  $scope.testOpt = [
    'ID',
    'Name',
    'Email',
    'Address'
  ];
  Ì¶$Ì¶sÌ¶cÌ¶oÌ¶pÌ¶eÌ¶.Ì¶rÌ¶eÌ¶sÌ¶uÌ¶lÌ¶tÌ¶OÌ¶pÌ¶tÌ¶ Ì¶=Ì¶ Ì¶'Ì¶'Ì¶;Ì¶
  $scope.resultOpt = null;
}]);

从文档中:

(可选)单个硬编码 <选项> <select> 无效的

有关详细信息,请参阅

AngularJS <select> Directive API Reference

演示

angular.module('MyApp', [])
.controller('MyCtrl', ['$scope', function ($scope) {

  $scope.testOpt = [
    'ID',
    'Name',
    'Email',
    'Address'
  ];
  $scope.resultOpt = null;
}]);

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="MyApp" ng-controller="MyCtrl">

    <select ng-options="opt as opt for opt in testOpt"
            data-ng-model="resultOpt">
      <option value="">Choose Category</option>
    </select>

    <br><br>
    <button ng-click="resultOpt=null">Reset</button>
 
</body>

Yogesh Patil 7 年前

我想对@georgeawg的答案补充一点,就是把disabled作为选项的一个属性,这样以后就不能重新选择它了

<option value="" disabled>Choose Category</option>

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

8 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

8 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

8 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

8 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

8 年前

使用平面阵列选择带有ng选项的默认选项

如何选择硬编码 null

演示

如何选择硬编码 `null`