ng-selected 不适用于 ng-repeat 以设置默认值

ng-selected does not work with ng-repeat to set default value

我正在尝试设置选项的默认值 我正在使用 select 和 ng-repeat。我确实在 js 文件中获取数据,我确实调用模型在那里设置值。

请查看以下代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ngrepeat-select-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
  <script src="app.js"></script>



</head>
<body ng-app="ngrepeatSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select  ng-model="datamodel">
      <option ng-repeat="dataitem in data"
                ng-selected ="{{dataitem == datamodel}}">{{dataitem}}</option>
    </select>
  </form>
  <hr>
  <tt>repeatSelect = {{datamodel}}</tt><br/>
</div>
</body>
</html>

app.js 文件

(function(angular) {
  'use strict';
angular.module('ngrepeatSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = [1,2,3,4,5];

    $scope.datamodel = 2;
 }]);
})(window.angular);

这是我的plunker

来自angular docs

Note that the value of a select directive used without ngOptions is always a string. When the model needs to be bound to a non-string value, you must either explicitly convert it using a directive (see example below) or use ngOptions to specify the set of options. This is because an option element can only be bound to string values at present.

因此将 $scope.datamodel = 2; 更改为 $scope.datamodel = '2'; 有效。查看更新后的 plunker.

但是,最好使用 ngOptions。同样,来自文档:

In many cases, ngRepeat can be used on <option> elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits, such as more flexibility in how the <select>'s model is assigned via the select as part of the comprehension expression, and additionally in reducing memory and increasing speed by not creating a new scope for each repeated instance.

因此,为了让您的模型保持整数,您可以使用:

<select  ng-model="datamodel" ng-options="dataitem for dataitem in data">
  <option value="">Please Select</option>
</select>

plunker