AngularJS - 在 ng-repeat 中设置默认值 [重复]

Question

我遇到了 AngularJS 的问题 - 我无法在 <select> 中显示所选值。

这是我的用例：

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

我的模型仅包含增值税率的 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

我无法为每个项目设置正确的选择值。

Answer 1

<select ng-model="val" ng-init="myval = vals[0]">
    <option ng-repeat="myval in vals" value="{{myval.value}}">{{val.name}}
    </option>
</select>

Answer 2

您应该通过控制器而不是 ng-init 在 ng-model 上设置默认值。来自docs

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

— AngularJS ng-init Directive API Reference - Overview

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>

Answer 3

我不太清楚您的要求，但如果您想将默认选择值显示为<select>，您可以使用 ng-selected。为了使用它，您需要在控制器中将 default selected value 作为 model 到您的 <select> 并将 ng-selected 添加到您的 <options ng-selected="{{defaultvalue == value.id}}" ng-repeat="value in vatRates">

对于代码和参考，我刚刚更改了您的 plunker，

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

希望这会有所帮助。

Answer 4

这是我设法做到这一点的唯一方法，并且当另一个选择发生变化时它就完成了。 （也许这就是其他解决方案不起作用的原因，请注意额外的 ""+ 以强制它为字符串。（否则不起作用）

在控制器中：

$scope.formData.number_of_persons = "̲"̲+̲ $scope.numberOfPersons[0].val;

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>