2016-03-15 67 views
0

我正在应用过滤器通过下拉菜单获取特定字段的数据,但是当我选择任何选项时,过滤器应用的元素将被删除。我该如何解决它?应用过滤器后删除元素

HTML代码:

<body ng-controller="MyCtrl"> 
<div> 
    <label>Country filter</label> 
    <input type="text" ng-model="countryFilter" /> 

    <label>Order by</label> 
    <select ng-model="selectedOrder"> 
    <option ng-repeat="option in options">{{option}}</option> 
    </select> 
</div> 

<ul> 
    <li ng-repeat="detail in details | filter:{loc : selectedOrder}">{{ detail.country }}</li>  
</ul> 
</body> 

JS代码:

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

app.controller('MyCtrl', function($scope) { 

// order by options 
$scope.options = ['1', '2', '3']; 

// all countries 
$scope.details = [{ 
    id:1, country:'Finland', address:'Mainstreet 2',detail:[{ 
    loc:'1' 
}] 
},{ 
id:2, country:'Mexico', address:'Some address',detail:[{ 
    loc:'2' 
}] 
},{ 
id:3, country:'Canada', address:'Snowroad 45',detail:[{ 
    loc:'3' 
}] 
}]; 
}); 

我想通过optionsloc值进行筛选。我哪里错了?

回答

1

您不需要编写自定义过滤器。 filter:{detail: {loc:selectedOrder}}

我加<option value=""></option>的下拉列表,并以默认显示所有国家建立$scope.selectedOrder = "";

更改您的过滤器。

Codepen

+0

你救了我的时间..非常感谢 – sajalsuraj

0

filter:{prop:value}返回在第一级具有属性prop的对象,它不会更深入地观察对象。 (当没有params的通常过滤器做它)

您的对象在数组details没有'loc'属性。所以没有适合的过滤器

您无法使用标准角度滤镜通过第二层和更深层对象的精确属性进行过滤。实施您自己的或更改数据。