angularjs过滤了深刻的JSON对象

Question

我有以下格式的数据：

{ 
    "A": { 
    "P": { 
     "Age": { 
     "keyName": "Repo1", 
     "checked": false 
     }, 
     "Gender": { 
     "keyName": "Repo2", 
     "checked": false 
     } 
    } 
    }, 
    "S": { 
    "D": { 
     "keyName": "Repo3", 
     "checked": false 
    }, 
    "W": { 
     "keyName": "Repo4", 
     "checked": false 
    } 
    } 
} 

HTML：

<div ng-controller="MyController"> 
    <ul> 
    <li ng-repeat="kName in keyNames"> 
     <input type="checkbox" value="{{kName.keyName}}" ng-click="selectedKeyNames($event, kName)"> {{kName.keyName}} 
     </li> 
    </ul> 

    <pre>{{tempData | json}}</pre> 
</div> 

JS：

var myApp = angular.module('myApp', []); 

myApp.controller('MyController',["$scope","$filter", function ($scope, $filter) { 

    $scope.tempData = {"A":{"P":{"Age":{"keyName":"Repo1","checked":false},"Gender":{"keyName":"Repo2","checked":false}}},"S":{"D":{"keyName":"Repo3","checked":false},"W":{"keyName":"Repo4","checked":false}}}; 

$scope.keyNames = $filter("buildKeyMap")($scope.tempData); 

$scope.selectedKeyNames = function(e, rpt){ 
    $scope.findNode($scope.tempData, "keyName", rpt.keyName, $(e.target).is(":checked")); 

}; 

     $scope.findNode = function(obj, key, val, isChecked) { 
      var objects = []; 
      for (var i in obj) { 
       if (!obj.hasOwnProperty(i)) continue; 
       if (typeof obj[i] == 'object') { 
        objects = objects.concat($scope.findNode(obj[i], key, val, isChecked)); 
       } else if (i == key && obj[key] && obj[key] == val) { 
        obj.checked = isChecked; 
        $scope.foundObject = obj; 
        break; 
       } 
      } 
      return $scope.foundObject; 
     }; 

}]).filter("buildKeyMap",function(){ 
     return function(items){ 
      var options = [] 
      var recursiveFilter = function(items){ 
       angular.forEach(items, function(item, parentKey){ 
        if(item.hasOwnProperty("keyName")){ 
         options.push({"keyName": item.keyName}); 
        }else{ 
         recursiveFilter(item); 
        } 
       }); 
      }; 
      recursiveFilter(items); 
      return options; 
     }; 
    }); 

，我想只过滤那些节点其中checked = true。它应该是在相同的JSON结构。我已经完成了checked = true，但我无法从json中删除或添加节点。

这里是小提琴： http://jsfiddle.net/qsp4dwsd/5/ 它设置检查= true，但JSON保持不变的情况下，假意或真心

Answer 1

这里我创建了工作demo。

总体变化：

• 定义NG-模型复选框
• 定义的变量OrginalData
• 更改selectedKeyNames方法
• 更改find​​Node方法

HTML

<div ng-controller="MyController"> 
    <ul> 
    <li ng-repeat="kName in keyNames"> 
     <input type="checkbox" ng-model="kName.checked" value="{{kName.keyName}}" ng-click="selectedKeyNames()"> {{kName.keyName}} 
     </li> 
    </ul> 

    <pre>{{tempData | json}}</pre> 
</div> 

JS

var myApp = angular.module('myApp', []); 

myApp.controller('MyController',["$scope","$filter", function ($scope, $filter) {  

var OriginalData ={"A":{"P":{"Age":{"keyName":"Repo1","checked":false},"Gender":{"keyName":"Repo2","checked":false}}},"S":{"D":{"keyName":"Repo3","checked":false},"W":{"keyName":"Repo4","checked":false}}} 

$scope.tempData = $.extend(true, {}, OriginalData); 

$scope.keyNames = $filter("buildKeyMap")($scope.tempData); 

$scope.selectedKeyNames = function(e, rpt){ 
    $scope.tempData = $.extend(true, {}, OriginalData); 
    for(var kName in $scope.keyNames){ 
    $scope.findNode($scope.tempData, "keyName", $scope.keyNames[kName].keyName, $scope.keyNames[kName].checked); 
    } 
}; 

     $scope.findNode = function(obj, key, val, isChecked) { 
      for (var i in obj) { 
       if (!obj.hasOwnProperty(i)) continue; 
       if (typeof obj[i] == 'object') { 
       $scope.findNode(obj[i], key, val, isChecked); 
       } 
       else if (i == key && obj[key] && obj[key] == val)        {     
         if(!isChecked) { 
         delete obj[i]; 
         delete obj["checked"]; 
        } 
        else 
         obj.checked = isChecked; 
        break; 
       } 
      }    
     }; 

}]).filter("buildKeyMap",function(){ 
     return function(items){ 
      var options = [] 
      var recursiveFilter = function(items){ 
       angular.forEach(items, function(item, parentKey){ 
        if(item.hasOwnProperty("keyName")){ 
         options.push({"keyName": item.keyName}); 
        }else{ 
         recursiveFilter(item); 
        } 
       }); 
      }; 
      recursiveFilter(items); 
      return options; 
     }; 
    }); 

Answer 2

我可以帮助更多有究竟是如何做到这一点可以随意给我发短信，但简单的答案是在过滤器这一大包：

https://github.com/a8m/angular-filter#filterby

通过过滤器有助于正是你正在尝试做的，不过我建议你转换顶层对象到一个数组第一。

collection | filterBy: [prop, nested.prop, etc..]: search: strict[optional] 

希望这会有所帮助。