Question

我使用了许多复选框将其值推送到数组，以用作过滤数据集的参数。

要求是：

在选择父类别时显示子过滤器。
如果取消选中父级，则应自动取消选中所有子级（false）（否则它们将被隐藏并仍为真）
显示有效过滤器
单击时删除活动过滤器（也以编程方式取消选中相应的复选框）。
清除所有过滤器并取消选中所有复选框。

我目前的代码如下，但请参阅随附的小提琴。

$scope.IsChecked = false;
$scope.ActiveFilters = [];

$scope.clearFilters = function() {
    $scope.ActiveFilters = [];
};

$scope.ModifyFilter = function (IsChecked, Filter) {
    console.log(IsChecked);
  if (IsChecked) {
    $scope.ActiveFilters.push(Filter);
  }
  else {
    var indexz = $scope.ActiveFilters.indexOf(Filter);
    $scope.ActiveFilters.splice(indexz, 1);
  }
};

一个半工作示范的小提琴是here

- 编辑 -

进一步说明：选中复选框后，它会将其值推送到数组。如果我通过点击“有效过滤器”中的名称将其从阵列中删除在小提琴底部的部分，然后它不取消选中复选框。也没有点击＆＃39;清除过滤器＆＃39;。

Answer 1

问题出在你的html绑定中。所以请在这里发布此代码。您使用“IsChecked”变量。这是为每次循环迭代创建的局部范围变量。您不能从脚本代码中更改它。

更新了html：

<body ng-app="DemoApp" ng-controller="DashboardCtrl"> 

    <div ng-repeat="group in Filters">

       <input type="checkbox" value="{{group.title}}" ng-model="CheckboxParent" />
           {{group.title}}

       <div ng-show="CheckboxParent" class="animate-show" ng-repeat="filter in group.filters">

           <input type="checkbox" class="filterChild" value="{{filter.name}}" ng-model="filter.checked" ng-change="ModifyFilter(filter.checked,filter)"/>
                {{filter.name}} 
       </div>
    </div>

    <div>
      <h4>Active Filters</h4>

        <p class="clear-filters" ng-click="clearFilters()">Clear Filters</p>
        <ul ng-repeat="activeFilter in ActiveFilters">
            <li ng-model="activeFilter.checked" ng-click="removeFilter(ModifyFilter(activeFilter.checked,activeFilter))">{{activeFilter.name}}</li>
        </ul>
    </div>

</body>

更新了脚本：

var app = angular.module("DemoApp", [])

app.controller("DashboardCtrl", function($scope) {

    $scope.clearFilters = function() {
        angular.forEach($scope.Filters[0].filters, function(filter) {
          filter.checked = false;
        });
        $scope.ActiveFilters = [];
    };

    $scope.IsChecked = false;
    $scope.ActiveFilters = [];

    $scope.ModifyFilter = function (IsChecked, Filter) {
        console.log(IsChecked);
      if (IsChecked) {
        $scope.ActiveFilters.push(Filter);
      }
      else {
        var indexz = $scope.ActiveFilters.indexOf(Filter);
        $scope.ActiveFilters.splice(indexz, 1);
      }
    };


    $scope.Filters = 
         [
        {
            "title": "Equipment",
            "filters": [
                { name: "Rope", checked: false },
                { name: "Cables", checked: false },
                { name: "Dowel", checked: false },
                { name: "Ball", checked: false }
            ]
        }
    ];  
});

在js小提琴上查看我的解决方案：JsFiddle

从数组中删除时，以编程方式取消选中AngularJS中的ng-checkbox

1 个答案: