javascript - 将复选框的 Id 绑定(bind)到数组

Question

我有一个包含用于显示一些复选框的对象的 View 模型:

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 作为标签来创建复选框:

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

<div>
    <div ng-repeat="limitinfo in l.LimitInfos">
        <label>
            <input type="checkbox" ng-model="vm.settings.ComponentInfos[limitinfo.Id]" 
            value="{{limitinfo.Id}}"/> {{limitinfo.FriendlyName}}
        </label>
    </div>
</div>

我想为每个选中的复选框将选中的 LimitInfo.Id 存储在 array 中。我能够将它们存储在这样的对象中:

settings = {
    "ComponentInfos" : {}
  }; 

结果示例:

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

我需要做的是将 LimitInfo.Id 存储在 array 中，如下所示:

settings = {
    "ComponentInfos" : []
  };

预期结果:

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

我将我的代码上传到 Plunker .

Answer 1

您可以在复选框上使用 ng-click 方法和自定义 Controller 方法来推送到该数组。

<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]);
    }
};

看这个plnkr .

看这个answer