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

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

我更倾向于在父作用域上预定义一个对象数组，其中每个对象都有类型（名称），以及一个布尔值来指示它是否被选中：

$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和子范围的更多信息。

Answer 2

您可以将动态值存储到$ scope的某个属性中，如下所示：

function DynamicController($scope) {
    $scope.types = [
        "typeOne",
        "typeTwo",
        "typeThree"        
    ];
    $scope.typeValues = {};
};

<div ng-app ng-controller="DynamicController">
    <div ng-repeat="type in types">
        <input  type="checkbox" ng-model="typeValues[type]" ng-click="show()" /> {{ type }}
    </div>

    <h3>Values</h3>
    <div ng-repeat="type in types">
        {{ type }} : {{ typeValues[type] }}
    </div>
</div>

然后，您可以通过范围的typeValues属性检查您的值。

var i,
    length = $scope.types.length;

for (i = 0; i < length; i++) {
    console.log($scope.types[i] + " : " + $scope.typeValues[$scope.types[i]]);
}

如何为angularjs中的ng-model动态赋值？

2 个答案: