Question

好的，我的问题是我有一个简单的选择下拉列表，并使用ng-repeat填充下拉列表，如下所示：

<select ng-model="tstCtrl.model.value" required>
  <option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
</select>

选择一个选项后，对 model.value 的绑定工作正常，但在此之前它似乎没有将选定的下拉选项绑定到值 model.value 最初设置为。

以下说明如下：

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>

  <script>
    angular.module('Test', []).controller('TestController', function(){
      
      this.model = {
        value:3
      };
      
      this.myOptions = [
        {a:1, b:"one"},
        {a:2, b:"two"},
        {a:3, b:"three"},
        {a:4, b:"four"},
        {a:5, b:"five"}];
    });
  </script>
  </head>

  <body ng-app="Test" ng-controller="TestController as tstCtrl">

    {{tstCtrl.model.value}}

    <select ng-model="tstCtrl.model.value" required>
      <option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
    </select>

  </body>



</html>

我认为以上片段非常清楚，但我很乐意回答任何问题。

我该如何解决这个问题？

由于

Answer 1

我建议您在select中使用ng-options语法而不是ng-repeat。如果要显示属性b但绑定到属性a，可以使用以下语法：

<select ng-model="model.value" ng-options="option.a as option.b for option in myOptions" required>      
</select>

以下是您修改过的工作代码段：

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>

  <script>
    angular.module('Test', []).controller('TestController', function($scope){
      
      $scope.model = {
        value:3
      };
      
      $scope.myOptions = [
        {a:1, b:"one"},
        {a:2, b:"two"},
        {a:3, b:"three"},
        {a:4, b:"four"},
        {a:5, b:"five"}];
    });
  </script>
  </head>

  <body ng-app="Test" ng-controller="TestController">

    {{model.value}}

    <select ng-model="model.value" ng-options="option.a as option.b for option in myOptions"  required>      
    </select>

  </body>



</html>

Answer 2

如果你绝对必须使用ng-repeat，你可以这样做：

    <select ng-model="tstCtrl.model.value">
      <option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}" 
              ng-selected="tstCtrl.model.value==option.a">
                   {{option.b}}
       </option>
    </select>

但我同意其他建议使用ng-options的人。

Answer 3

从AngularJS 1.3.x到1.4的已知问题，特别是ng-model和select下拉列表。简而言之，Angular文档已更新，它们提供了更正确的方法来解决此问题：

app.directive('convertToNumber', function() {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {                
            ngModel.$parsers.push(function(val) {                    
                return parseInt(val, 10);
            });
            ngModel.$formatters.push(function (val) {                    
                return '' + val;
            });
        }
    };
});

在您的选择下拉列表中，添加指令：

<select ng-model="tstCtrl.model.value" convert-to-number required>
  <option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
</select>

以下是上述解决方案源自的参考网址：

http://weblog.west-wind.com/posts/2015/May/21/Angular-Select-List-Value-not-binding-with-Static-Values

Answer 4

只需要ng-options而不是像这样的ng-repeat：

ng-options="option.a as option.b for option in myOptions"

选择下拉列表最初不绑定到AngularJS模型

4 个答案: