Angular JS - 根据多个下拉菜单的选择来过滤表格行。

Question

有一个HTML表格显示员工记录。表有4个字段。1.) ID 2.) 姓名 3.) 经理 4.) 部门。还有两个下拉字段可以过滤记录。1.) 经理 2.) 部门，默认情况下，它将在两个下拉框中显示 "全部"，并显示所有记录。但是当我在下拉框中选择任何值时，它没有过滤记录。

Angular代码：var app = angular.module('myApp', [])。

    app.controller('myCtrl', function($scope, $http) {

    $http.get('/emp').then(function(response) {
        $scope.employees = response.data;
    });

    $scope.select = function() {
          return function(emp) {
            return !$scope.selectedDep || emp.edep == $scope.selectedDep;}
        };

    $scope.managers = ['Manager 1','Manager 2'];

    $scope.department = ['TECH','HR','OPS'];});

HTML。

     <div id="detail" data-ng-app="myApp" data-ng-controller="myCtrl">

        <div class="form-group">
            <label for="selectedMgr">Manager</label><br>
            <select data-ng-model="selectedMgr" data-ng-options="mgr for mgr in managers">
                <option value="">All</option>
            </select>
        </div>

        <div class="form-group">    
            <label for="selectedDep">Department</label><br>
            <select data-ng-model="selectedDep" data-ng-options="dep for dep in department">
                <option value="">All</option>
            </select>
        </div>

    <br>

    <table class="table table-striped" id="rtable">
        <thead>
            <th>Select</th>                 
            <th>ID</th>
            <th>Name</th>
            <th>Manager</th>
            <th>Department</th>
        </thead>
        <tbody>
            <tr data-ng-repeat="emp in employees | filter:select">
                <td><input type="checkbox" /></td>
                <td>{{ emp.eid }}</td>
                <td>{{ emp.ename }}</td>
                <td>{{ emp.emgr }}</td>
                <td>{{ emp.edep }}</td> 
            </tr>
        </tbody>
    </table>        
  </div>

Answer 1

我认为你的选择函数实际上应该是过滤值的函数。

> $scope.select = function(emp) { 
>     return !$scope.selectedDep || emp.edep == $scope.selectedDep; 
> }

如果你不想改变它，也许你应该使用它作为下面。

<tr data-ng-repeat="emp in employees | filter:select()">