使用group by并显示隐藏所选复选框的组div

Question

我需要能够根据复选框的类别对其进行分组，并仅显示已选择项目的组，并隐藏其他组。

但是根据我的代码，它显示和隐藏但选中类别的所有复选框。我如何修改它来解决这个问题?

我明白这是因为我返回的东西，但是h

我有:

HTML:

<div ng-controller="dataController">
<div>
<!--<ul ng-repeat="(key, value) in properties | groupBy: 'name'" ng-show='(properties |  filter: filterByCategory)'">-->
 <ul ng-repeat="(key,value) in filtered=(properties  | filter:filterByCategory| groupBy: 'name') ">
  <li>Group name: <strong>{{ key }}</strong></li>
          <div  ng-repeat="prop in value">
            <label>
                        <input type="checkbox" ng-model="filter[key]"/>
                        <span>{{prop.Property}}</span>
            </label>
          </div>
 </ul>

JS:

$scope.filter = {};
$scope.filterByCategory = function (prop) {

        return $scope.filter[prop.name] || noFilter($scope.filter);
    };
     function noFilter(filterObj) {
        for (var key in filterObj) {
            if (filterObj[key]) {
                return false;
            }
        }
        return true;
    }  

Answer 1

您在prop in value上ng-repeat复选框，但在ng-model复选框上使用分组key。

这意味着一个组的所有复选框共享相同的ng-model表达式，因此相同的scope属性——选中一个当然会选中所有其他的。

我真的不知道你想用你的过滤器对象实现什么，但是你需要为你的复选框使用单独的ng-model表达式，让它们有单独的状态。