Javascript AngularJS - 在 ng-repeat 中设置选择的默认值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30088227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS - Set default value on select inside a ng-repeat
提问by Pat
I'm facing to an issue with AngularJS - I'm not able to display the selected value in a <select>.
我正面临 AngularJS 的问题 - 我无法在<select>.
Here is my use case:
这是我的用例：
I have a view which starts by an ng-repeat to display components. Each component contains a select to choose the vat rate. When creating new items, it looks fine. But when I'm editing existing items, the actual vatRate code is not displayed in the select, and instead I see the default option "-- Select VAT Rate --" instead of the selected VAT.
我有一个视图，它以 ng-repeat 开头来显示组件。每个组件都包含一个选择以选择增值税率。创建新项目时，它看起来不错。但是，当我编辑现有项目时，实际增值税代码未显示在选择中，而是我看到默认选项“-- 选择增值税率--”而不是选定的增值税。
My model only contains the Id of the vat Rate.
我的模型只包含增值税率的 ID。
With a single component I can use a variable in the $scope to set the current item value, but here I can have multiple components, each of them has its own vat rate, so I am not sure how do that here:
对于单个组件，我可以使用 $scope 中的变量来设置当前项目值，但在这里我可以有多个组件，每个组件都有自己的增值税率，所以我不知道这里是怎么做的：
Here is my code
这是我的代码
<div ng-repeat="i in items">
<label>{{i.id}}</label>
<input ng-model="i.title">
<select ng-model="i.vatRateId">
<option value="">--- Select an option ---</option>
<option ng-repeat="value in vatRates"
ng-selected="i.vatRateId == value.id"
value="{{value.id}}">{{value.value}}
</option>
</select>
</div>
And the objects:
和对象：
$scope.vatRates = [
{ 'id': 1, 'value' : '20' },
{ 'id': 2, 'value' : '10' },
{ 'id': 3, 'value' : '7' }
];
$scope.items = [
{ 'id': 1, 'title' : 'Title1', 'vatRateId' : '1' },
{ 'id': 2, 'title' : 'Title2', 'vatRateId' : '2' },
{ 'id': 3, 'title' : 'Title3', 'vatRateId' : '3' }
];
Here is a live demo to explain my issue:
这是一个现场演示来解释我的问题：
I'm not able to set to each item in the select the right value.
我无法为选择正确的值中的每个项目设置。
回答by Alhuck A
I am not very much clear about your requirement but if you want to display a default selected value to <select>, you can use ng-selected. In order to use that you need to have default selected valuein your controller as a modelto your <select>and add ng-selected to your <options ng-selected="{{defaultvalue == value.id}}" ng-repeat="value in vatRates">
我不是很清楚您的要求，但如果您想将默认选定值显示为<select>，您可以使用ng-selected。为了使用它，您需要在控制器中将默认选定值作为模型<select>添加到您的模型中，并将 ng-selected 添加到您的<options ng-selected="{{defaultvalue == value.id}}" ng-repeat="value in vatRates">
For code and reference i just altered your plunker,
对于代码和参考，我只是改变了你的 plunker，
http://embed.plnkr.co/ZXo8n0jE8r3LsgdhR0QP/preview
http://embed.plnkr.co/ZXo8n0jE8r3LsgdhR0QP/preview
Hope this helps.
希望这可以帮助。
回答by kachhalimbu
You should set the default value on the ng-modelvia controller instead of ng-init. From the docs
您应该在ng-modelvia 控制器而不是 ng-init上设置默认值。从文档
The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
ngInit 唯一合适的用途是为 ngRepeat 的特殊属性设置别名，如下面的演示所示。除了这种情况，您应该使用控制器而不是 ngInit 来初始化范围上的值。
angular.module('app', [])
.controller('SelectController', function() {
var selectCtrl = this;
selectCtrl.values = ["Value 1", "Value 2", "Value 3"];
selectCtrl.selectedValue = "Value 1";
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="SelectController as selectCtrl">
<select ng-model="selectCtrl.selectedValue">
<option ng-repeat="value in selectCtrl.values" value="{{value}}">{{value}} </option>
</select>
</div>回答by Adam Michalski
<select ng-model="val" ng-init="myval = vals[0]">
<option ng-repeat="myval in vals" value="{{myval.value}}">{{val.name}}
</option>
</select>
回答by Chris
This is the only way i managed to do it, and its done when another select is changing. (maybe thats the cause other solutions don't work, please note the extra ""+to force it to be a string. (otherwise not working)
这是我设法做到的唯一方法，并且在另一个选择发生变化时完成。（也许这就是其他解决方案不起作用的原因，请注意额外的 ""+以强制它是一个字符串。（否则不起作用）
In the controller:
在控制器中：
$scope.formData.number_of_persons = "?"?+? $scope.numberOfPersons[0].val;
HTML:
HTML：
<select name="number_of_persons"
id="number_of_persons"
ng-model="formData.number_of_persons"
required>
<option ng-repeat="option in numberOfPersons" value="{{option.val}}">
{{option.val}}
</option>
</select>
