选择下拉菜单最初未绑定到 AngularJS 模型答案

【问题标题】：select dropdown not binding initially to AngularJS model选择下拉菜单最初未绑定到 AngularJS 模型
【发布时间】：2015-12-28 13:48:57
【问题描述】：

好的，我的问题是我有一个简单的选择下拉列表，并且正在使用 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>

我认为上面的 sn-p 说得很清楚，但很乐意回答任何问题。

我该如何解决这个问题？

谢谢

【问题讨论】：

您是否有理由使用 ng-repeat 而不是 ng-options？
只是因为我在语法上更喜欢它，你认为它会与 ng-options 一起使用吗？
我确实这么认为，文档中的示例设置了默认值。如果你想坚持你的方法：stackoverflow.com/questions/18194255/…
有效：jsfiddle.net/khjdgk82

标签： javascript angularjs data-binding

【解决方案1】：

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

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

这是你修改后的工作 sn-p：

<!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>

【讨论】：

【解决方案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 的人的观点。

【讨论】：

我选择了这个选项，主要是因为可能会有非 Angular 开发人员不时查看这段代码，而且这更容易阅读。我觉得 ng-options 只会让人们感到困惑

【解决方案3】：

从 AngularJS 1.3.x 升级到 1.4 存在一个已知问题，特别是 ng-model 和选择下拉菜单。简而言之，更新了 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

【讨论】：

【解决方案4】：

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

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

【讨论】：

能否请您详细说明您的答案，添加更多关于您提供的解决方案的描述？