如何根據下拉菜單的值過濾數據？

注：AngularJS版本1.2.28如何根據下拉菜單的值過濾數據？

我是一個新手，AngularJS並試圖隱藏基於在下拉菜單中選擇的價值元素。如果選擇「黑色」的下拉選項，則數據表只應顯示分隔顏色爲「黑色」的元素。如果選擇「黃色」的下拉選項，則數據表應僅顯示分割顏色爲「黃色」的元素。

我將如何去過濾數據並隱藏不包含在下拉菜單中選擇的值的項目？

這裏是我的樣本數據（我離開了應用程序和控制器指令，爲了簡潔）：

[{ lastName: 'Doe', firstName: 'John', division: 'Blue'}, 
{ lastName: 'Smith', firstName: 'Jane', division: 'Yellow' }]

下拉HTML：

<select ng-model="orderProp"> 
    <option value="division">Black</option> 
    <option value="division">Yellow</option> 
</select>

表視圖：

<table> 
    <thead> 
    ...snip ... 
    </thead> 
</table> 
<tbody> 
    <tr ng-repeat="item in items | orderBy: orderProp"> 
     <td></td> 
    </tr> 
</tbody>

我的腳本：

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

myApp.controller('MyCtrl', function($scope, $http){ 
    $http.get('data.json').success(function(data){ 
     $scope.items = data; 
     $scope.orderProp = 'lastName'; 
    }); 
});

來源

2017-02-15 redshift

https://docs.angularjs.org/api/ng/filter/filter –

難道你不是指**隱藏包含選定值的項目？**而不是**隱藏不包含所選值的項目**其他方式您的列表將僅包含1個值，即所選值。所以如果選擇了'Yellow'，那麼'ng-repeat'中的輸出列表是什麼樣的？ – user2718281

答案很簡單，你應該添加默認篩選器像你加入的OrderBy（這也是某種過濾器）：

<table> 
    <thead> 
    ...snip ... 
    </thead> 
</table> 
<tbody> 
    <tr ng-repeat="item in items | filter: orderProp | orderBy: orderProp"> 
     <td></td> 
    </tr> 
</tbody>

HERE你可以找到更多的過濾功能。

來源

2017-02-15 22:19:17

試試這個，

<tr ng-repeat="item in items | filter: {division: orderProp}"> 
    <td></td> 
</tr>

，爲什麼你需要在控制器$scope.orderProp = 'lastName';？刪除它，如果不是真的需要

來源

2017-02-16 07:44:51

如何根據下拉菜單的值過濾數據？

回答

相關問題