Question

注意：AngularJS版本1.2.28

我是AngularJS的新手，并尝试根据下拉菜单中选择的值隐藏元素。如果＆＃34; Black＆＃34;的下拉选项如果选中，则数据表应仅显示分割颜色为＆＃34;黑色＆＃34;的元素。如果＆＃34;黄色＆＃34;的下拉选项如果选中，则数据表应仅显示分割颜色为＆＃34;黄色＆＃34;。

的元素

如何过滤数据并隐藏不包含下拉菜单中所选值的项目？

这是我的示例数据（我为了简洁而遗漏了应用和控制器指令）：

[{ 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';
    });
});

Answer 1

答案很简单，你应该像添加orderBy一样添加默认过滤器（这也是某种过滤器）：

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

HERE您可以找到有关过滤功能的更多信息。

Answer 2

试试这个，

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

为什么你需要控制器中的$scope.orderProp = 'lastName';？如果不是真的需要删除它

如何根据下拉菜单值过滤数据？

2 个答案: