2016-03-15 65 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'屬性。所以沒有適合的過濾器

您無法使用標準角度濾鏡通過第二層和更深層對象的精確屬性進行過濾。實施您自己的或更改數據。