Question

我需要一些AngularJS语法的帮助来使动态复选框选择器绑定到对象属性。

问题：

<div ng-repeat="level in vm.Settings.LevelList">
    <input type="checkbox" ng-model="vm.Item.Level.{{level.ShortName}}" ng-change="CheckLevel()"> {{level.Name}}
<div>

物品＆＃39; level只是一个键值对象。重要的是要注意并非所有级别都适用于某个项目，但每个项目都有一个具有所有可能选项的对象，如下所示：

Item.Level = {
    L1: false,
    L2: true,
    L3: false,
    L4: false,
}

我的vm.Settings.LevelList会根据加载的页面发生变化。为简单起见，我们假设我们有以下数组可供使用：

Settings.LevelList = [
    { Name: 'Level 2', ShortName: 'L2', SortOrder: 2, },
    { Name: 'Level 3', ShortName: 'L3', SortOrder: 3, },
]

我的模板列出了我使用ng-if隐藏不相关的ckeckbox的所有可能选项。虽然我不希望在同一时间经常更改关卡，但我不想花时间跟踪每个级别复选框的模板。所以，以下是我目前所拥有的：

<div ng-if="conditon to hide L1"><input type="checkbox" ng-model="vm.Item.Level.L1" ng-change="CheckLevel()"> Level 1</div>
<div ng-if="conditon to hide L2"><input type="checkbox" ng-model="vm.Item.Level.L2" ng-change="CheckLevel()"> Level 2</div>
<div ng=if="conditon to hide L3"><input type="checkbox" ng-model="vm.Item.Level.L3" ng-change="CheckLevel()"> Level 3</div>
<div ng-if="conditon to hide L4"><input type="checkbox" ng-model="vm.Item.Level.L4" ng-change="CheckLevel()"> Level 4</div>

但我想要的应该是以下形式：

<div><input type="checkbox" ng-model="vm.Item.Level.L2" ng-change="CheckLevel()"> {{level.Name}}</div>
<div><input type="checkbox" ng-model="vm.Item.Level.L3" ng-change="CheckLevel()"> {{level.Name}}</div>

因此，转发器应该只需要根据Settings.LevelList生成两个复选框选项。如果模型绑定正确，则应检查Level 2的复选框（Item.Level.L2 = true）。

以防有人想知道CheckLevel()只是确保选择了至少一个级别选项。另外，我正在使用AngularJS v1.5.8。

Answer 1

如果您的起始对象有两个项目，并且您正在通过它重复，那么您只需要进行两次迭代，因此它非常简单。在你的重复中有一个拼写错误，你有'ShortName＆＃39;但是在你拥有＆＃39; ShartName＆＃39;所以我修改了输入以显示它。

<div ng-repeat="level in vm.Settings.LevelList">
  <div>
    <input type="checkbox" ng-model="vm.Item.Level[level.ShartName]"
      ng-change="CheckLevel()" /> {{level.Name}}
  </div>
<div>

动态ng模型绑定到ng-repeater内的对象属性

1 个答案: