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

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

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

{{option.b}

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

这一点如下所示：

角度.module（'Test'，[]）.controller（'TestController'，function（）{
该模型={
价值：3
};
此.myOptions=[
{a:1，b:“一”}，
{a:2，b:“两个”}，
{a:3，b:“三”}，
{a:4，b:“四”}，
{a:5，b:“五”}；
});
{{tstCtrl.model.value}
{{option.b}

我建议您使用

ng选项

语法，而不是在选择中使用

ng repeat

。如果要显示属性

b

，但要绑定到属性

a

，可以使用以下语法：

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

以下是您修改的工作片段：

角度.module（'Test'，[]）.controller（'TestController'，function（$scope）{
$scope.model={
价值：3
};
$scope.myOptions=[
{a:1，b:“一”}，
{a:2，b:“两个”}，
{a:3，b:“三”}，
{a:4，b:“四”}，
{a:5，b:“五”}；
});
{{model.value}}

如果您必须使用

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="option.a as option.b for option in myOptions"

{{option.b}

---

但我同意其他建议使用ng选项的人的意见。

只需要ng选项而不是ng重复如下：

    <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="option.a as option.b for option in myOptions"

---

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

{{option.b}

以下是上述解决方案的来源参考URL：

---

您使用ng repeat而不是ng repeat有什么原因吗？只是因为我更喜欢它的语法，您认为它能与ng选项一起工作吗？我确实这样认为，文档中的示例设置了默认值。如果你想坚持你的方法：它是有效的：你能详细说明你的答案吗？再加上一点关于你提供的解决方案的描述？我选择了这个选项，主要是因为可能会有非角度的开发人员不时地看这段代码，这更容易阅读。我觉得ng选项只会让人困惑