Javascript 将复选框的Id绑定到数组

我有一个视图模型，其中包含一个用于显示某些复选框的对象：

components =  {
  "ComponentInfos": [
    {
      "Id": "1abb0ee5-7e44-4e45-92da-150079066e99",
      "FriendlyName": "Component1",
      "LimitInfos": [
        {
          "Id": "4b7cd37a-2378-4f4f-921b-e0375d60d19c",
          "FriendlyName": "Component1 Full",
        },
        {
          "Id": "ff9ebe78-fbe4-4a26-a3df-6ec8e52cd0f2",
          "FriendlyName": "Component1 Light",
        }
      ]
    }

我可以创建带有

FriendlyName

标签的复选框：

结果示例：

"2e80bedb-4a18-4cc4-bdfd-837ffa130947": true,
"add1edf8-4f11-4178-9c78-d591a6f590e3": true

我需要的是将

LimitInfo.Id

存储在

数组中，如下所示：

settings = {
    "ComponentInfos" : {}
  }; 

settings = {
    "ComponentInfos" : []
  };

预期结果：

"2e80bedb-4a18-4cc4-bdfd-837ffa130947", "add1edf8-4f11-4178-9c78-d591a6f590e3"

我将代码上载到。
单行解决方案
您可以在vanilla JS中执行以下操作（ES5及以上版本，所以是现代浏览器）

您可以使用复选框上的ng click方法和自定义控制器方法推送到该数组

<input type="checkbox" ng-model="vm.settings.ComponentInfos[limitinfo.Id]" 
                value="{{limitinfo.Id}}" ng-click="toggleSelection(limitinfo.ImpliedLimits)"/> 



$scope.toggleSelection = function toggleSelection(item) {
    var idx = $scope.vm.settings.ComponentInfos.indexOf(item);
    if (idx > -1) {
      $scope.vm.settings.ComponentInfos.splice(idx, 1);
    }
    else {
      $scope.vm.settings.ComponentInfos.push(item[0]);
    }
};


$scope.toggleSelection=函数toggleSelection（项）{
var idx=$scope.vm.settings.ComponentInfos.indexOf（item）；
如果（idx>-1）{
$scope.vm.settings.ComponentInfos.splice（idx，1）；
}
否则{
$scope.vm.settings.ComponentInfo.push（项[0]）；
}
};

看这个

看看这个
我是angularJS的新手，试试这个：

将此代码段添加到app.js

this.data =[];
this.selection = function(){
    this.data =[];
    angular.forEach(this.settings["ComponentInfos"], function(value, key) {
      if(value)
        this.push(key);
    }, this.data);
 }

这是index.html的主体

<div ng-repeat="l in vm.components.ComponentInfos">

<h4>{{l.FriendlyName}}</h4>

<div>
    <div ng-repeat="limitinfo in l.LimitInfos">
        <label>
            <input type="checkbox" ng-model="vm.settings.ComponentInfos[limitinfo.Id]" ng-click="vm.selection()"
            value="{{limitinfo.Id}}"/> {{limitinfo.FriendlyName}}
        </label>
    </div>
</div>
</div>
<hr>
<pre>
 {{vm.settings | json }}
 {{vm.data}}
</pre>


{{l.FriendlyName}}
{{limitinfo.FriendlyName}

{{vm.settings}json}
{{vm.data}
您可以使用
ng单击
更新您的列表。
我已将其添加到
MyViewModel
函数中，并将
ComponentInfos
的类型更改为数组

此外，您需要将html中的输入更改为

{{limitinfo.FriendlyName}
通过
指令
：


var-app=angular.module（'plunker'，[]）；
app.directive（'myCheckbox'，function（）{
返回{
限制：'EA'，
模板：“”
+“{{label}}”
+'',
替换：正确，
范围：{
标签：“@”，
值：'@'，
输出：'='
},
链接：功能（范围、元素、属性）{
//初始检查状态
scope.model=scope.output.indexOf（scope.value）>-1；
//绑定单击替换手表模型
scope.toggleModel=函数（）{
if（scope.model）{
scope.output.push（scope.value）；
返回false；
}
scope.output.splice（scope.output.indexOf（scope.value），1）；
}
}
}
});
函数MyViewModel（）
{
此项。组件={
“组件信息”：[
{
“Id”：“1abb0ee5-7e44-4e45-92da-150079066e99”，
“FriendlyName”：“组件1”，
“LimitInfos”：[
{
“Id”：“4b7cd37a-2378-4f4f-921b-e0375d60d19c”，
“FriendlyName”：“组件1已满”，
“隐含限制”：[
“ff9ebe78-fbe4-4a26-a3df-6ec8e52cd0f2”
]
},
{
“Id”：“ff9ebe78-fbe4-4a26-a3df-6ec8e52cd0f2”，
“FriendlyName”：“组件1灯”，
“隐含限制”：[
“4f74abce-5da5-4740-bf89-dc47dafe6c5f”
]
},
{
“Id”：“4f74abce-5da5-4740-bf89-dc47dafe6c5f”，
“FriendlyName”：“Component2用户”，
“隐含限制”：[]
}
]
},
{
“Id”：“ad95e191-26ee-447a-866a-9206955BB3B3B6”，
“FriendlyName”：“组件2”，
“LimitInfos”：[
{
“Id”：“8d13765a-978e-4d12-a1aa-24a1dda2149b”，
“FriendlyName”：“组件2完整”，
“隐含限制”：[
“4f74abce-5da5-4740-bf89-dc47dafe6c5f”
]
},
{
“Id”：“2e80bedb-4a18-4C4-bdfd-837ffa130947”，
“FriendlyName”：“组件2灯”，
“隐含限制”：[
“4f74abce-5da5-4740-bf89-dc47dafe6c5f”
]
},
{
“Id”：“add1edf8-4f11-4178-9c78-d591a6f590e3”，
“FriendlyName”：“组件2查看器”，
“隐含限制”：[
“4f74abce-5da5-4740-bf89-dc47dafe6c5f”
]
}
]
}
]
};
此参数。设置={
“组件信息”：[“4b7cd37a-2378-4f4f-921b-e0375d60d19c”，“2e80bedb-4a18-4C4-bdfd-837ffa130947”]
};
}
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.vm=新的MyViewModel（）；
});

安古拉斯普朗克
文件。写（“”）；
{{l.FriendlyName}}

{{vm.settings}json}
这个代码看起来是一个很好的解决方案，不幸的是，未检查的组件没有被删除，但又被添加了，并且似乎一些复选框具有相同的ID或NulLIF，您需要处理那些项目不是唯一的情况，您应该在我的答案的顶部添加代码，或者可能考虑将它们存储在对象中。干杯，我知道了。我忘记删除您在示例中使用的
ImpliedLimits
属性-对不起，是我的错。我现在很难在检索保存的设置后选中保存的复选框。这是更新的plnkr：太好了。你说的检索保存的设置是什么意思？工作起来很有魅力。我尝试在没有指令的情况下获得解决方案（看起来有点过分），但这将是我的退路；-）。感谢您期待您的解决方案，请与我们分享，谢谢。：）当我加载
ComponentInfos
数组时，是否有方法更新视图？例如，当您输入
“ComponentInfo”：[“add1edf8-4f11-4178-9c78-d591a6f590e3”]
以选中复选框时？不知何故，如果我直接单击复选框，id会成功添加到数组中，但复选框不会被选中。如果单击标签，复选框将被选中。你能帮助我吗？我的道歉，再次更新了，上面的代码片段，应该通过输入
onchange
而不是标签上的
onclick
来处理用户操作。
this.data =[];
this.selection = function(){
    this.data =[];
    angular.forEach(this.settings["ComponentInfos"], function(value, key) {
      if(value)
        this.push(key);
    }, this.data);
 }

<div ng-repeat="l in vm.components.ComponentInfos">

<h4>{{l.FriendlyName}}</h4>

<div>
    <div ng-repeat="limitinfo in l.LimitInfos">
        <label>
            <input type="checkbox" ng-model="vm.settings.ComponentInfos[limitinfo.Id]" ng-click="vm.selection()"
            value="{{limitinfo.Id}}"/> {{limitinfo.FriendlyName}}
        </label>
    </div>
</div>
</div>
<hr>
<pre>
 {{vm.settings | json }}
 {{vm.data}}
</pre>

this.update = function (value) {
    var exists = false;
    for (var elem of this.settings["ComponentInfos"]){
      if (elem === value) {
        exists = true;
      }
    }

    if(exists) {
      var index = this.settings["ComponentInfos"].indexOf(value);
      this.settings["ComponentInfos"].splice(index,1);
    } else {
      this.settings["ComponentInfos"].push(value);
    }
  }