使用AngularJS和ng-repeat初始化select
我正在尝试使用AngularJS 1.1.5中的ng-repeat来预先填充选项。 相反，select始终没有select任何东西。 它也有一个空的选项，我不想要。 我认为没有任何select的副作用。
我可以使用ng-options来代替ng-repeat，但是我想在这种情况下使用ng-repeat。 虽然我缩小的例子没有显示，但我也想设置每个选项的title属性，而且据我所知，无法使用ng-options来完成。
我不认为这与共同的AngularJs范围/原型inheritance问题有关。 在巴塔朗考察时，至less我没有看到任何明显的迹象。 另外，当你用UIselect一个选项时，模型会正确更新。
这是HTML：
<body ng-app ng-controller="AppCtrl"> <div> Operator is: {{filterCondition.operator}} </div> <select ng-model="filterCondition.operator"> <option ng-repeat="operator in operators" value="{{operator.value}}" > {{operator.displayName}} </option> </select> </body> 而JavaScript：
function AppCtrl($scope) { $scope.filterCondition={ operator: 'eq' } $scope.operators = [ {value: 'eq', displayName: 'equals'}, {value: 'neq', displayName: 'not equal'} ] }
JS小提琴为此： http : //jsfiddle.net/coverbeck/FxM3B/2/
好。 如果你不想使用正确的方法ng-options ，你可以添加ng-selected属性和一个条件检查逻辑来为option指令做出预选工作。
<select ng-model="filterCondition.operator"> <option ng-selected="{{operator.value == filterCondition.operator}}" ng-repeat="operator in operators" value="{{operator.value}}"> {{operator.displayName}} </option> </select>
工作演示
对于select标签，angular提供了ng-options指令。 它为您提供了设置选项和设置默认值的特定框架。 这里是更新的小提琴使用ng-options按预期工作： http : //jsfiddle.net/FxM3B/4/
更新的HTML（代码保持不变）
<body ng-app ng-controller="AppCtrl"> <div>Operator is: {{filterCondition.operator}}</div> <select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators"> </select> </body>
感谢TheSharpieOne指出ng选定的选项。 如果这是作为答复而不是作为评论发布的话，我会做出正确的答案。
这是一个可用的JSFiddle： http : //jsfiddle.net/coverbeck/FxM3B/5/ 。
我也更新了小提琴，以使用title属性，这是我在原来的文章中遗漏了，因为它不是问题的原因（但是这是我想用ng-repeat代替ng-options的原因） 。
HTML：
<body ng-app ng-controller="AppCtrl"> <div>Operator is: {{filterCondition.operator}}</div> <select ng-model="filterCondition.operator"> <option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option> </select> </body>
JS：
function AppCtrl($scope) { $scope.filterCondition={ operator: 'eq' } $scope.operators = [ {value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'}, {value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'} ] }
angular向selection中注入一个空选项元素的事实是，默认情况下绑定到它的model对象在初始化时会带有一个空值。
如果你想select一个默认的选项，那么你可以将其设置在控制器的范围内
$scope.filterCondition.operator = "your value here";
如果你想要一个空的选项占位符，这对我有用
<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators"> <option value="">Choose Operator</option> </select>
build议你需要使用ng选项，不幸的是我相信你需要引用数组元素的默认值（除非数组是一个string数组）。
JavaScript：
function AppCtrl($scope) { $scope.operators = [ {value: 'eq', displayName: 'equals'}, {value: 'neq', displayName: 'not equal'} ] $scope.filterCondition={ operator: $scope.operators[0] } }
HTML：
<body ng-app ng-controller="AppCtrl"> <div>Operator is: {{filterCondition.operator.value}}</div> <select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators"> </select> </body>
如果您正在使用md-select和ng-repeat md-option from angular material，则可以将ng-model-options="{trackBy: '$value.id'}"到ng-model-options="{trackBy: '$value.id'}"显示的md-select标签灰钢笔
码：
<md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}"> <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label> <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option> </md-select>
