AngularJS - 在ng-repeat内选择set的默认值

Question

我面临AngularJS的一个问题 - 我无法在a中显示所选的值<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' }
];

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

在PLNKR上演示

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

Answer 1

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

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

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

希望这可以帮助.

Answer 2

您应该在ng-modelvia控制器上设置默认值而不是ng-init.来自文档

ngInpe的唯一合适用途是用于别名ngRepeat的特殊属性,如下面的演示所示.除了这种情况,您应该使用控制器而不是ngInit来初始化作用域上的值.

- AngularJS ng-init指令API参考 - 概述

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>