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

Posted 2023-03-11

【中文标题】AngularJS - 在 ng-repeat 中设置默认值 [重复]

【英文标题】：AngularJS - Set default value on select inside a ng-repeat [duplicate]

【发布时间】：2015-07-17 06:26:06

【问题描述】：

我遇到了 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

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

【问题讨论】：

当然，我们可以帮助您。但是你能先帮助我们吗？通过删除标记和样式的不相关部分来帮助我们？然后，为了避免猜测和假设，让我们了解您使用的一些对象和一些函数的结构，例如updateVatRate 或settings？为了额外的奖励，也许将一些变量/文本翻译成英文（看看这是一个英文网站）。我为您修复了一些问题 - 请添加有关丢失代码的更多详细信息，下次请花时间解决您的问题。

感谢@NewDev，我想我已经很清楚了 ^^ 没关系，这里有一个现场演示来解释我的问题。 plnkr.co/edit/OROLI64Q13PlJhSE4GOl?p=preview我无法为每个项目设置正确的值

你有一个演示很好，但问题应该是独立的 - 我更新了它，如果你觉得它没有反映你的实际问题，请修复编辑。

accept 答案有太多问题，对其他读者有用。

【参考方案1】：

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

【讨论】：

欲了解更多信息，请参阅AngularJS API Reference - Using ngRepeat to generate select options。

【参考方案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>

【讨论】：

但是你不能切换选项

【参考方案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

希望这会有所帮助。

【讨论】：

是的，这正是我需要的！！！非常感谢 ！！ ;)

很高兴您的问题得到解决！！ :)

万一您将默认值设置为已知字符串值，例如“Matt”，您不能只使用ng-selected="'Matt'"。您的已知字符串需要等同于该值，即ng-selected=" value == 'Matt' "

如果您在选择上使用ngModel，则不应在选项上使用ngSelected，因为ngModel 将设置选择值和选定选项。见AngularJS ng-selected Directive API Reference。

ng-selected 属性不应使用大括号 进行插值。见AngularJS Developer Guide - Binding to boolean attributes。另见AngularJS Developer Guide - Why mixing interpolation and expressions is bad practice。

【参考方案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>

【讨论】：

另一个选项是使用ng-value 指令，该指令允许将值设置为字符串以外的值。

见AngularJS select Directive API Reference - Using ngValue to bind the model to an array of objects。