将复选框的绑定Id绑定到一个数组上。

20 浏览
0 Comments

将复选框的绑定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 作为标签创建复选框：

{{l.FriendlyName}}

我想把每个选定的复选框的 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。

admin 更改状态以发布 2023年5月19日
0

2 答案

0 Comments

一行代码解决方案

你可以在原生的JS中使用以下代码（ES5及以上版本，现代浏览器支持）

var data = {
    "a": true,
    "b": false,
    "c": true,
    "d": false,
    "e": true,
    "f": true
  }
var arr = Object.keys(data).filter( key => !!data[key] );
// ['a', 'c', 'e', 'f']

0
0 Comments

你可以在复选框上使用ng-click方法，使用自定义控制器方法将其推送到该数组中。

 
$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示例。

查看这个答案

0