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

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>

其中项目的级别只是一个键值对对象。请务必注意，并非所有级别都适用于一个项目，但每个项目都有一个对象，其中包含所有可能的选项，如下所示：

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 隐藏不相关的复选框的所有可能选项。虽然我不希望级别经常同时更改，但我不想花时间跟踪出现级别复选框的每个模板。所以，以下是我目前拥有的：

<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”，但在日期您有“ShortName”，所以我修改了输入以显示它。

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