首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Angular JS - Filter Table行基于从多个下拉列表中进行选择

Angular JS - Filter Table行基于从多个下拉列表中进行选择
EN

Stack Overflow用户
提问于 2020-06-04 21:47:17
回答 1查看 120关注 0票数 0

有一个显示员工记录的HTML表。表中有4个字段: 1.)ID 2。)名称3。)管理器4。)部门。还有两个下拉字段可用于过滤记录:1)管理器2。)部门,默认情况下,它将在两个下拉框中显示“全部”,并显示所有记录。但当我在下拉列表中选择任何值时,它不会过滤记录。

Angular Code: var app = angular.module('myApp',[]);

代码语言:javascript
运行
复制
    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:

代码语言:javascript
运行
复制
     <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>
EN

回答 1

Stack Overflow用户

发布于 2020-06-05 05:03:38

我认为您的select函数实际上应该是过滤值的函数:

代码语言:javascript
运行
复制
> $scope.select = function(emp) { 
>     return !$scope.selectedDep || emp.edep == $scope.selectedDep; 
> }

如果你不想改变它,也许你应该使用它,如下所示:

代码语言:javascript
运行
复制
<tr data-ng-repeat="emp in employees | filter:select()">
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62196271

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档