angularjs - 如何在angularjs中为ng-model动态赋予值(value)？

Question

这里我使用 ng-repeat 动态生成一个 html 元素。例如

<div ng-repeat="type in types">
    <input  type="checkbox" ng-model="{{type}}" />{{ type }}
</div>

我想为 ng-model 设置类型值。是否有可能，否则我想像这样为 ng-true-value 设置该类型值

<div ng-repeat="type in types">
    <input  type="checkbox" ng-model="{{type}}" ng-true-value="{{type}}" />{{ type }}
</div>

Answer 1

由于 ng-repeat 为每个类型/项目/迭代创建一个子范围，我们需要将每个类型的 ng-model 与父范围相关联，而不是子范围。一种方法是使用 $parent:

<input type="checkbox" ng-model="$parent[type]">{{ type }}

如果 $scope.types 的定义类似于@Alex 的回答，那么属性 typeOne , typeTwo , 和 typeThree如果单击相应的复选框，将出现在父作用域上，属性的值为 true .如果再次单击选中的复选框，则该属性保持不变，并且值将切换为 false .因此，您的代码必须检查不存在的属性以及值设置为 true 或 false 的存在的属性。这有点乱。

我更愿意在父作用域上预定义一个对象数组，其中每个对象都有类型(名称)和一个 bool 值来指示它是否被选中:

$scope.types = [ 
  {name: 'typeOne', selected: false},
  {name: 'typeTwo', selected: false},
  {name: 'typeThree', selected: false}];

然后， $parent 不是必需的(因为“type”的值将是对父对象的引用，而不是父属性(原始)值的副本):

<input type="checkbox" ng-model="type.selected">{{ type.name }}

另见 What are the nuances of scope prototypal / prototypical inheritance in AngularJS?了解更多关于 ng-repeat 和子作用域的信息。