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

Question

我正在使用平面阵列生成 <option> 和 ng-options。我遇到的问题是 selecting 我已经定义的默认选项元素。似乎是一个非常简单的任务，并且有大量使用对象或对象数组的类似问题，但我为我的情况找到和尝试的一切都不起作用。

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

我想做的是 select 默认情况下的 "Choose Category" 选项。正如许多其他人已经在其他问题中建议的那样，我尝试在我的控制器中使用 $scope.resultOpt = ''，甚至尝试使用 ng-init="resultOpt = ''"，但这根本不起作用。 这适用于对象数组或对象，但不适用于简单数组。我也不想跳出 AngularJS 框架，我不喜欢混搭 vanilla 和 AngularJS 代码，事情变得一团糟。

我找到了一个适用于 AngularJS 1.4.8 的现有 jsFiddle，但至少适用于 AngularJS 1.7.8，这在与平面数组一起使用时不起作用。不确定它是在更高版本中删除的功能，还是只是一个错误。

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

如何在不超出 AngularJS 框架的情况下默认使用平面数组 select "Choose Category" 选项？

Answer 1

如何 select hard-coded `null` 选项与 ng-options 和 ng-model

给select单hard-coded<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;
}]);

来自文档：

Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option.

有关详细信息，请参阅

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 的答案中的一件事是将禁用作为选项的属性，这样它就不会 reselect-able 将来

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

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

Select default option with ng-options using a flat array

angularjs

ng-options

如何 select hard-coded null 选项与 ng-options 和 ng-model

演示

如何 select hard-coded `null` 选项与 ng-options 和 ng-model