嵌套Filter json使用带AngularJS的Checkbox

时间:2016-12-06 18:30:59

标签: angularjs json checkbox filter

我有一个Json数据,我需要创建一个嵌套的过滤器搜索角度。如果你们可以帮助我,因为我是新手,我试过但是我觉得很困难。

1 个答案:

答案 0 :(得分:0)

我没有你的css但是在高级别它应该像THIS而对于多级过滤器参考 THIS

点击复选框后,我使用 addToFilter 功能将过滤器类别添加到我的阵列之一。

<强> HTML

<input  type="checkbox" ng-checked="item.checked" ng-model="item.checked" ng-click="addToFilter(item.node.category)"/> {{ item.node.category }}

<强> HTML

代码 filter:categoryFilter 将根据所选类别过滤来自数组的记录。

<div ng-repeat="item in nodes | filter:categoryFilter | orderBy:'node.location' | groupBy:['node.location'] ">
    <h2 ng-show="item.group_by_CHANGED">{{item.node.location}}</h2>
        <ul>
            <li>{{item.node.title}}</li>
         </ul></div>

<强> JS

此js代码用于在选中时从数组中添加所选类别,并在未选中时删除。

$scope.filtersApplied =[];
$scope.addToFilter = function(category)
{
  var i = $.inArray(category.trim(), $scope.filtersApplied);
  console.log(category);
  if (i > -1) {
     $scope.filtersApplied.splice(i, 1);
   } else {
     $scope.filtersApplied.push(category.trim());
   }
}
$scope.categoryFilter = function(node) {
   if ($scope.filtersApplied.length > 0) {
     if ($.inArray(node.node.category.trim(), $scope.filtersApplied) < 0)
     return;
   }
 return node;
}

**请忽略我的分组代码。我只是想模拟你在图像中显示的内容。

使用CSS

更新了SAMPLE