[英]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;
}
}
為了更好地利用角度,我會將您的結構轉換為可以排序和過濾的數組,而對象不能
如何做到這一點? 如果應該的話,我應該更改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.