动态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隐藏不相关的ckeckboxes所有可能的选择。虽然我不希望级别经常同时更改，但我不想花时间跟踪级别复选框apear中的每个模板。因此，下面是我目前有：

<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'，但是在'ShartName'的日期，所以我修改了输入来显示它。

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