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] 

希望這會有所幫助。