过滤所选选项

时间:2015-05-01 11:32:23

标签: javascript angularjs select

如何根据选择的选项过滤表格内容?
我需要刷新下面的表格 - 每次选择的选项都会改变。

HTML

<select ng-model="selectedGrade" ng-options="grade.Id as grade.Title for grade in grades"></select>

<table>
<tr>
    <th>ID</th>
    <th>Description</th> 
</tr>
<tr ng-repeat="attr in attributes|filter:{grade:selectedGrade.Title}">
    <td>{{attr.id}}</td>
    <td>{{attr.name}}</td> 
</tr>
</table>

模块

angular.module('Employee',[])
.controller('EmployeeCtl',function($scope){
    $scope.grades=[
       {"id":1,"Title":"MTS"},
       {"id":2,"Title":"SMTS"},
       {"id":3,"Title":"PMTS"},
       {"id":4,"Title":"CMTS"}
    ];
    $scope.attributes=[
       {"id":1,"name":"Greg","grade":"MTS"},
       {"id":2,"name":"Marlon","grade":"SMTS"},
       .........
    ];
});

1 个答案:

答案 0 :(得分:0)

{{ selectedGrade }}添加到您的模板中。您会注意到selectedGrade包含的内容是所选成绩的ID,因为您使用了

grade.Id as grade.Title for grade in grades

如果您希望selectedGrade包含成绩对象,则应使用

grade.Title for grade in grades

阅读relevant documentation