复选框列表 ng-repeat 过滤器动态 angularjs

【问题标题】：Checkboxlist ng-repeat filter dynamic angularjs复选框列表 ng-repeat 过滤器动态 angularjs
【发布时间】：2016-12-06 02:09:15
【问题描述】：

我正在 AngularJS 中尝试使用动态过滤器（位置 - 值，如 US、IN、CA 等）显示员工详细信息，作为基于从 DB 获取的数据的复选框列表。我尝试了多种方法都没有成功。请帮助实现 Checkboxlist 中的动态过滤器。

我的代码示例如下：

  <html>
<body ng-app="myapp" ng-controller="myController">


     <div >Location</div>
        <table>
            <tbody>
                <tr ng-repeat="empL in EmpResult | unique : 'Location'">
                    <td>
                        <span>
                            <input type="checkbox" ng-model="loc" value={{empL.Location}} />
                            {{empL.Location}}
                    </span>
                </td>
            </tr>
        </tbody>
    </table>
    <table align="left" style="width: 100%" class="table">
        <thead>
            <tr>

                <th align="left" style="width: 30%">Employee</th>
                <th align="left" style="width: 20%">Address</th>
                <th align="left" style="width: 15%">Location</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="empN in EmpResult | filter : loc">

                <td align="left" style="width: 30%">{{empN.EmpName}}</td>
                <td align="left" style="width: 10%">{{empN.Address}}</td>
                <td align="left" style="width: 15%">{{empN.Location}}</td>

            </tr>
        </tbody>
    </table>

    <script type="text/javascript">

        var myapp = angular.module('myapp', ['ui.unique'])
        .controller("myController", function ($scope, $http) {

            $http({
                method: 'Get',
                params: { strName: $scope.strName },
                url: 'Emp.asmx/GetEmpbyName'
            }).then(function (response) {
                $scope.EmpResult = response.data;
            })

        });
    </script>
</body>
</html>

【问题讨论】：

  • 据我所知，过滤器不是这样工作的。您必须定义一个实际的过滤器方法（而不仅仅是像您那样使用范围变量）。检查文档。在这里，您有一个很好的描述和非常简单的示例，非常符合您的需求：docs.angularjs.org/api/ng/filter/filter
  • @FDavidov 是的，但@Ravi 使用的过滤器来自他在模块中注入的依赖项'ui.unique'，因此不需要定义。但是这个依赖已经贬值了，所以我的问题是为什么要使用贬值的依赖？

标签： javascript angularjs filter checkboxlist


【解决方案1】：

我已经为您的问题创建了一个镜像，请查看它。我认为它应该适用于您的情况。

Plunker

<!DOCTYPE html>
<html>

  <head>
      <meta charset="utf-8" />
      <title>AngularJS Plunker</title>
      <script>
          document.write('<base href="' + document.location + '" />');
      </script>
      <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  </head>

  <body ng-app="myApp" ng-controller="myController">
      <div ng-init="init()">Location</div>
      <table>
          <tbody>
              <tr ng-repeat="empL in locations">
                  <td>
                      <span>
                              <input type="checkbox" name="locations + $index" data-ng-model="locChkBox.loc[$index]" ng-true-value="'{{empL}}'" ng-false-value="" ng-change="repopulate()"/>
                              {{empL}}
                      </span>
                  </td>
              </tr>
          </tbody>
      </table>
      <table align="left" style="width: 100%" class="table">
          <thead>
              <tr>
                  <th align="left" style="width: 30%">Employee</th>
                  <th align="left" style="width: 20%">Address</th>
                  <th align="left" style="width: 15%">Location</th>
              </tr>
          </thead>
          <tbody>
              <tr ng-repeat="empN in EmpResult | filter : locFilter ">
  
                  <td align="left" style="width: 30%">{{empN.EmpName}}</td>
                  <td align="left" style="width: 10%">{{empN.Address}}</td>
                  <td align="left" style="width: 15%">{{empN.Location}}</td>
  
              </tr>
          </tbody>
      </table>
    <script>
      var myApp = angular.module('myApp', []);
      
      myApp.controller("myController", ['$scope', '$http', function($scope, $http) {
      
          $scope.locations = [];
          $scope.search = {};
          $scope.locChkBox = {};
          $scope.locChkBox.loc = [];
          $scope.locChkBox.loc.push("US");
      
          $scope.init = function() {
              $scope.EmpResult = JSON.parse('[{"EmpName":"jondoe","Address":"dummyAddr","Location":"US"},{"EmpName":"jondoe2","Address":"dummyAddr2","Location":"IN"},{"EmpName":"jondoe3","Address":"dummyAddr3","Location":"CA"},{"EmpName":"jondoe4","Address":"dummyAddr4","Location":"US"},{"EmpName":"jondoe5","Address":"dummyAddr5","Location":"IN"},{"EmpName":"jondoe6","Address":"dummyAddr6","Location":"CA"},{"EmpName":"jondoe7","Address":"dummyAddr7","Location":"US"},{"EmpName":"jondoe8","Address":"dummyAddr8","Location":"IN"},{"EmpName":"jondoe9","Address":"dummyAddr9","Location":"CA"},{"EmpName":"jondoe11","Address":"dummyAddr11","Location":"US"},{"EmpName":"jondoe22","Address":"dummyAddr22","Location":"IN"}]');
      
              var flags = [],
                  output = [],
                  l = $scope.EmpResult.length,
                  i;
              for (i = 0; i < l; i++) {
                  if (flags[$scope.EmpResult[i].Location]) continue;
                  flags[$scope.EmpResult[i].Location] = true;
                  output.push($scope.EmpResult[i].Location);
              }
      
              $scope.locations = output;
      
          };
      
          $scope.locFilter = function(item) {
            for (var i = 0; i < $scope.locChkBox.loc.length; i++) {
              if (item.Location === $scope.locChkBox.loc[i])
                  return true;
            }
            return false;
          };
      }]);
    </script>
  
  </body>

</html>

编辑 2

如果没有选中任何复选框，此代码将显示所有值。

<!DOCTYPE html>
<html>

  <head>
      <meta charset="utf-8" />
      <title>AngularJS Plunker</title>
      <script>
          document.write('<base href="' + document.location + '" />');
      </script>
      <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  </head>

  <body ng-app="myApp" ng-controller="myController">
      <div ng-init="init()">Location</div>
      <table>
          <tbody>
              <tr ng-repeat="empL in locations">
                  <td>
                      <span>
                              <input type="checkbox" name="locations + $index" data-ng-model="locChkBox.loc[$index]" ng-true-value="'{{empL}}'" ng-false-value="" ng-change="repopulate()"/>
                              {{empL}}
                      </span>
                  </td>
              </tr>
          </tbody>
      </table>
      <table align="left" style="width: 100%" class="table">
          <thead>
              <tr>
                  <th align="left" style="width: 30%">Employee</th>
                  <th align="left" style="width: 20%">Address</th>
                  <th align="left" style="width: 15%">Location</th>
              </tr>
          </thead>
          <tbody>
              <tr ng-repeat="empN in EmpResult | filter : locFilter ">
  
                  <td align="left" style="width: 30%">{{empN.EmpName}}</td>
                  <td align="left" style="width: 10%">{{empN.Address}}</td>
                  <td align="left" style="width: 15%">{{empN.Location}}</td>
  
              </tr>
          </tbody>
      </table>
    <script>
      var myApp = angular.module('myApp', []);
      
      myApp.controller("myController", ['$scope', '$http', function($scope, $http) {
      
          $scope.locations = [];
          $scope.search = {};
          $scope.locChkBox = {};
          $scope.locChkBox.loc = [];
      
          $scope.init = function() {
              $scope.EmpResult = JSON.parse('[{"EmpName":"jondoe","Address":"dummyAddr","Location":"US"},{"EmpName":"jondoe2","Address":"dummyAddr2","Location":"IN"},{"EmpName":"jondoe3","Address":"dummyAddr3","Location":"CA"},{"EmpName":"jondoe4","Address":"dummyAddr4","Location":"US"},{"EmpName":"jondoe5","Address":"dummyAddr5","Location":"IN"},{"EmpName":"jondoe6","Address":"dummyAddr6","Location":"CA"},{"EmpName":"jondoe7","Address":"dummyAddr7","Location":"US"},{"EmpName":"jondoe8","Address":"dummyAddr8","Location":"IN"},{"EmpName":"jondoe9","Address":"dummyAddr9","Location":"CA"},{"EmpName":"jondoe11","Address":"dummyAddr11","Location":"US"},{"EmpName":"jondoe22","Address":"dummyAddr22","Location":"IN"}]');
      
              var flags = [],
                  output = [],
                  l = $scope.EmpResult.length,
                  i;
              for (i = 0; i < l; i++) {
                  if (flags[$scope.EmpResult[i].Location]) continue;
                  flags[$scope.EmpResult[i].Location] = true;
                  output.push($scope.EmpResult[i].Location);
              }
      
              $scope.locations = output;
      
          };
      
          $scope.locFilter = function(item) {
            if($scope.locChkBox.loc.isNull()) return true;
            for (var i = 0; i < $scope.locChkBox.loc.length; i++) {
              if (item.Location === $scope.locChkBox.loc[i])
                  return true;
            }
            return false;
          };
      }]);
      
      Array.prototype.isNull = function (){
          return this.join().replace(/,/g,'').length === 0;
      };
    </script>
  
  </body>

</html>

【讨论】：

  • 当我修改代码时，我犯了错误，但在我的实际代码中，body 标签中有 ng-app 和 ng-controller。
  • 感谢您的代码，它对我有用，但默认情况下它按位置过滤为“美国”，但在初始加载时，我想显示所有记录而不使用任何过滤器。过滤器也可以在没有 ng-change="repopulate()" 的情况下工作
  • 嗨@Ravi，请查看我更新的EDIT2 代码。如果没有选中任何复选框，则此代码将显示所有结果，如果选中任何一个，则将根据该复选框显示结果。
  • 嗨@Raman，感谢您的快速回复。它按我的预期工作。感谢您的帮助。
【解决方案2】： 
<tr ng-repeat="empN in EmpResult | filter : 'loc'">

也可以使用带有单引号的过滤器。这将过滤复选框中的数据。

【讨论】：

    猜你喜欢
    • 2014-03-08
    • 2016-06-16
    • 2016-09-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-09-07
    • 2017-01-09
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode