时间戳

首页 > 解决方案 > Angular JS - 过滤表行基于从多个下拉列表中的选择

angularjs - Angular JS - 过滤表行基于从多个下拉列表中的选择

问题描述

有一个显示员工记录的 HTML 表格。表有 4 个字段：1.) ID 2.) 名称 3.) 经理 4.) 部门。还有两个下拉字段允许过滤记录：1.）经理 2.）部门，默认情况下，它会在两个下拉框中显示“全部”并显示所有记录。但是当我在下拉列表中选择任何值时，它不会过滤记录。

角度代码： 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>

标签： angularjsangular-filters

解决方案

我认为您的选择功能实际上应该是过滤值的功能：

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

如果您不想更改它，也许您应该按如下方式使用它：

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

推荐阅读