javascript – AngularJS – 在ng-repeat 内选择设置默认值

参见英文答案 > AngularJS. When select have ng-model attribute, ng-selected not working                                    2个
我正面临AngularJS的问题 – 我无法在< select>中显示所选值.

这是我的用例：

我有一个视图,它以ng-repeat开头显示组件.每个组件都包含一个选择以选择增值税率.创建新项目时,它看起来很好.但是当我编辑现有项目时,实际的vatRate代码不会显示在选择中,而是我看到默认选项“ – 选择增值税率 – ”而不是选定的增值税.

我的模型只包含增值税率的Id.

使用单个组件,我可以使用$scope中的变量来设置当前项值,但是在这里我可以有多个组件,每个组件都有自己的增值税率,所以我不知道这是怎么做到的：

这是我的代码

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

对象：

$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' }
];

这是一个现场演示来解释我的问题：

Demo on PLNKR

我无法在选择正确的值中设置每个项目.

解决方法:

我对您的要求不太清楚,但如果您想要将默认选定值显示为< select>,则可以使用ng-selected.为了使用它,您需要在控制器中将默认选定值作为< select>的模型.并将ng-selected添加到您的< options ng-selected =“{{defaultvalue == value.id}}”ng-repeat =“vatRates中的值”>

对于代码和参考我只是改变了你的plunker,

http://embed.plnkr.co/ZXo8n0jE8r3LsgdhR0QP/preview

希望这可以帮助.

标签：javascript,angularjs,select,angularjs-ng-repeat
来源： https://codeday.me/bug/20191001/1838868.html