如何使用angularJS过滤选定的复选框答案

【问题标题】：How to filter the selected checkbox using angularJS如何使用angularJS过滤选定的复选框
【发布时间】：2019-01-05 16:18:19
【问题描述】：

使用 ng-repeat 将所有对象数组作为列表列出，并为每个值添加复选框。

这里我想过滤复选框并在单击应用过滤器时根据选中/取消选中值（复选框）形成一个新的 JSON。

实际

我尝试通过连接过滤器名称及其值在模型范围对象（$scope.models）中添加选中和未选中的复选框

（即）：data1（过滤器名称）+1（值）= data11

点击应用过滤器时，循环现有过滤器数组并与模型对象进行比较并将匹配项推送到新数组中。

Plunker

应用过滤功能

HTML

<li ng-repeat="(key, filter) in filters">
<a href="" data-target="#{{filter.name}}" data-toggle="collapse" aria-expanded="{{enableShow.indexOf(filter.name) > -1 ? true : false}}">
    {{filter.name}}
</a>
<ul class="collapse list-unstyled" id="{{filter.name}}" ng-class="{show : enableShow.indexOf(filter.name) > -1}">
    <li ng-repeat="v in filter.values">
        <label class="w-100" ng-show="filter.type == 'CheckBox'">
            <span class="ml-3 p-1 d-block">
                {{v.value}}
                <input type="checkbox" ng-model="models[filter.name + v.value]" class="pull-right mt-1 ml-1" style="margin-right: 7%" />
            </span>
        </label>
    </li>
</ul>

$scope.applyFilters = function() {
var arr = [];
_.map($scope.filters, function(d) {
    _.map(d.values, function(v) {
        var name = d.name + v.value;
        for (key in $scope.models) {
            if (key == name) {
                arr.push({
                    name: d.name,
                    values: v
                });
            }
        }
    });
});
console.log(arr);
};

预期

单击应用过滤器时，希望形成一个新的 JSON，其中仅包含其各自对象中的选定值。

{
"results": [
    {
        "name": "data1",
        "type": "CheckBox",
        "values": [
            {
                "value": "1"
            },
            {
                "value": "4"
            }
        ]
    },
    {
        "name": "data2",
        "type": "CheckBox",
        "values": [
            {
                "value": "1"
            }
        ]
    },
    {
        "name": "data5",
        "type": "CheckBox",
        "values": [
            {
                "value": "3"
            }
        ]
    },
    {
        "name": "data6",
        "type": "CheckBox",
        "values": [
            {
                "value": "2"
            }
        ]
    }
]
}

提前致谢。

【问题讨论】：

请包含此代码运行的 HTML。
当询问由您的代码引起的问题时，如果您提供人们可以用来重现问题的代码，您将获得更好的答案。该代码应该是……最少 - 使用尽可能少的代码，但仍会产生相同的问题。见How to create a Minimal, Complete, and Verifiable example。

标签： javascript arrays angularjs loops lodash

【解决方案1】：

使用_.map() 迭代原始数据结构并将其转换为请求的格式。使用_.filter() 或_.reject() 删除没有选定值的部分（plunker）：

$scope.applyFilters = function() {
  var arr = _($scope.filters)
    .map(function(o, i) {
      var section = _.pick(o, ['name', 'type']);

      section.values = _(o.values)
        .filter(function(v, j) {
          return $scope.models['data' + (i + 1) + (j + 1)];
        })
        .map(_.partialRight(_.pick, 'value'))
        .value();

      return section;
    })
    .reject(function(o) { return _.isEmpty(o.values); })
    .value();

  console.log(arr);
};

【讨论】：

【解决方案2】：

您可以使用obj.hasOwnProperty(prop) 在其各自的对象中仅包含选定的值。

只需将您的 applyFilters 更改为：

 $scope.applyFilters = function() {
    var arr = [];
    _.map($scope.filters, function(d) {
      _.map(d.values, function(v) {
        var name = d.name + v.value;
        for (key in $scope.models) {
           if (key == name && $scope.models.hasOwnProperty(key) && $scope.models[key]) {
            arr.push({
              name: d.name,
              values: v
            });
          }
        }
      });
    });
    console.log(arr);
  };

plunker：https://next.plnkr.co/edit/waIwyXgEkdfPtybq

希望对你有帮助！

【讨论】：