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

Question

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

4

我正在尝试使用AngularJS，根据从数据库中获取的数据，以动态过滤器（位置-值如US、IN、CA等）的形式显示员工详细信息，并将其作为复选框列表显示。我已经尝试了多种方法，但都没有成功。请帮忙实现来自复选框列表的动态过滤器。

下面是我的代码示例：

  <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>

- Ravi

据我所知，过滤器不是那样工作的。您必须定义一个实际的过滤器方法（而不仅仅是使用作用域变量的方式）。请查看文档。在这里，您可以找到一个很好的描述和非常简单的示例，非常符合您的需求：https://docs.angularjs.org/api/ng/filter/filter - FDavidov

@FDavidov 说得没错，但是 @Ravi 使用的过滤器来自于他注入到模块中的依赖项 'ui.unique'，因此不需要定义。然而，这个依赖项已经被弃用了，所以我的问题是为什么要使用一个被弃用的依赖项呢？ - Raman Sahasi

2个回答

1

<tr ng-repeat="empN in EmpResult | filter : 'loc'">

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

- Stark Buttowski

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Raman Sahasi · Accepted Answer

我已经为你创建了一个问题的镜像，请看一下。我认为它应该适用于你的情况。 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>

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

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