Question

我正在使用平面数组通过<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框架，我不喜欢混合和匹配香草和AngularJS代码，事情变得一团糟。

我发现现有的jsFiddle适用于AngularJS 1.4.8，但至少适用于AngularJS 1.7.8，当与平面数组一起使用时，此方法不起作用。不确定是不是更高版本中已删除的功能，还是仅仅是一个错误。

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

默认情况下，如何不使用AngularJS框架而使用平面数组选择“选择类别”选项？

Answer 1

如何通过ng-options和ng-model选择硬编码的`null`选项

要选择单个硬编码的<option>，请为模型分配null：

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;
}]);

从文档中：

（可选）可以将单个硬编码的<option>元素（其值设置为空字符串）嵌套在<select>元素中。然后，该元素将代表null或“未选中”选项。

有关更多信息，请参见

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>

Answer 2

我想在@georgeawg的答案中添加的一件事是将禁用作为选项的属性，以便将来无法重新选择

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

使用平面数组使用ng-options选择默认选项

2 个答案:

如何通过ng-options和ng-model选择硬编码的`null`选项

演示

使用平面数组使用ng-options选择默认选项

2 个答案:

如何通过ng-options和ng-model选择硬编码的null选项

演示

如何通过ng-options和ng-model选择硬编码的`null`选项