选择，使用 ng-repeat，不会出现 ng-model 的当前值答案

【问题标题】：Select, with ng-repeat, current value of ng-model doesn't appear选择，使用 ng-repeat，不会出现 ng-model 的当前值
【发布时间】：2017-01-18 17:33:11
【问题描述】：

我上面有这段代码：

<select ng-model = "vm.modulo.nomenclatura" class="form-control" required>
 <option></option>
 <option ng-value="modulo.key" ng-repeat="modulo in vm.availableModulos">{{modulo.value}}</option>
</select>

问题是，ng-model 当前值（甚至在选择选项之前）不会显示在字段上。它是空白的。有人可以帮忙吗？谢谢

【问题讨论】：

Initializing select with AngularJS and ng-repeat的可能重复
同样的问题，我试过但没用:(

标签： javascript html angularjs

【解决方案1】：

您应该使用ng-options 而不是重复选项检查这个小提琴 - https://plnkr.co/edit/XpgXNOPjC9ZJ8lYuPhGP?p=preview

angular.module("sampleApp", [])
  .controller("sampleController", function() {

    var vm = this;
    vm.availableModulos = [
        {value: "Value 1"}
        {value: "Value 2"},
        {value: "Value 3"},
        {value: "Value 4"},
        {value: "Value 5"}
    ];        
    vm.modulo = {nomenclatura: vm.availableModulos[2]};    
  });  

<body data-ng-controller="sampleController as vm">
    {{vm.modulo.nomenclatura}}
    <select ng-model = "vm.modulo.nomenclatura"     class="form-control" required ng-options="mod as mod.value for mod in vm.availableModulos">
      <option></option>
      </select>
  </body>

【讨论】：

@PedroFernandes - 我已经添加了完整的代码。请看一下

【解决方案2】：

使用角度选择标签的最佳做法是使用ng-options，而不是在选项中使用ng-repeat。使用 angular ng-options 和 track by 表达式来跟踪您的模型值。应该有一个唯一的 id 字段，应该作为跟踪键提供。 Th ng-model 将在 track by value 的基础上进行初始化。

这是一个工作演示。

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

<body>

    <div ng-app="myApp" ng-controller="myCtrl as vm">
        <select ng-model="vm.modulo.nomenclatura" class="form-control" required ng-options="option.value for option in vm.availableModulos track by option.id"> </select>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $timeout) {
            var _self = this;
            _self.availableModulos = [ { value: "Value 1", id: 0 },
                                    { value: "Value 2", id: 1 },
                                    { value: "Value 3", id: 2 },
                                    { value: "Value 4", id: 3 },
                                    { value: "Value 5", id: 4 }
                        ];
            _self.modulo = {
                nomenclatura: _self.availableModulos[2]
            };
        });
    </script>

</body>

</html>

【讨论】：