簡體   English   中英

ng-repeat篩選器密鑰和數據

[英]ng-repeat filter key and Data

我在使用ng-repeat遍歷鍵和數據時遇到麻煩,我在這里有一個小提琴https://jsfiddle.net/prantikv/ddLpfmvh/2/

我有這樣的json數據:

    {
  "container1": {
      "value1": "data1",
      "value2": "data2",
      "value3": "data3",
      "value4": "data4",
      "value5":{
            "innerArray":
                  [{"innerValue1":"innerData1"},
                  {"innerValue1":"innerData2"}
                  ]
              }

   },
  "container2": {
      "value1": "data1",
      "value2": "data2",
      "value3": "data3",
      "value4": "data4",
      "value5":{
            "innerArray":
                  [{"innerValue1":"innerData1"},
                  {"innerValue1":"innerData2"}
                  ]
              }

   }

}

我的看法是這樣

<input type="text" ng-model="searchInput" />
 <ul>
    <li data-ng-repeat="(key,value) in reports | filter:searchInput">
        {{ key }}</li>
</ul>

我想要實現的是我想過濾鍵(容器1,容器2等)以及值(值1,值2等)

如何做到這一點? 如果應該的話,我應該更改JSON嗎?

使用不是最佳的對象結構,可以使用ng-if並在控制器中創建一個函數來檢查值

<li data-ng-repeat="(key,value) in reports " ng-if="hasSearch(value)" >

我不是100%不清楚您要做什么,並且您的數據樣本幾乎是重復的,但請看以下內容:

$scope.hasSearch = function(obj){
    if(!$scope.searchInput){
        return true;
    }else{            
        for (key in obj){
            if(typeof obj[key] == 'string' && obj[key].indexOf( $scope.searchInput) >-1){
                return true
            }                
        }
        return false;
    }
}

為了更好地利用角度,我會將您的結構轉換為可以排序和過濾的數組,而對象不能

DEMO

如何做到這一點? 如果應該的話,我應該更改JSON嗎?

您可以創建一個自定義過濾器功能,這將需要您將json修改為類似

[{
        "containers":[
        {
            "container":{
                "value1":["data1"],
                "value2":["data2"],
                "name":"container1"
            }
        },
        {
            "container":{
                "value1":["data3"],
                "value2":["data4"],                
                "name":"container2"
             }
        }]
    }];

您的過濾器可能看起來像這樣

app.filter('containerFilter', function(){
    return function(objects, criteria){
        var filterResult = new Array();
        if(!criteria)
            return objects;

        for(index in objects) {
            // add more 
            if(objects[index].container.name.indexOf(criteria) != -1 ||
              objects[index].container.value1.indexOf(criteria) != -1 ||
                objects[index].container.value2.indexOf(criteria) != -1 )
                filterResult.push(objects[index]);
        }

        return filterResult;  
    }    

這是演示的鏈接

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM