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

问题描述：

我试图在AngularJS上根据数据从数据库中获取数据来显示带有动态过滤器（位置 - 值，如US，IN，CA等）的员工详细信息。我尝试过多种方式，但都没有成功。请帮助完成Checkboxlist中的动态过滤器。复选框列表ng-repeat过滤器动态angularjs

我的代码示例如下：

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

据我所知，过滤器不工作方式。你必须定义一个实际的过滤方法（不是像你所做的那样只使用一个范围变量）。检查文档。在这里你有一个很好的描述和非常简单的例子，可以满足你的需求：https://docs.angularjs.org/api/ng/filter/filter – FDavidov

@FDavidov这是真的，但@Ravi使用的过滤器来自依赖'ui.unique'他已经注入到他的模块中，所以不需要定义。然而，这种依赖性是贬值的，所以我的问题是为什么要使用折旧的依赖关系？ –

答

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

Plunker

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <title>AngularJS Plunker</title> 
 
     <script> 
 
      document.write('<base href="' + document.location + '" />'); 
 
     </script> 
 
     <script data-require="[email protected]" 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="[email protected]" 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。 – Ravi

感谢您的代码，它为我工作，但默认情况下，它按位置过滤为“美国”，但在初始加载时，我想显示所有记录而不使用任何过滤器。此外，过滤器没有ng-change =“repopulate（）” – Ravi

Hi @Ravi，请参阅我更新的EDIT2代码。如果没有选中该复选框，并且选择了任何一个复选框，则此代码将显示所有结果，然后它将根据此结果显示结果。 –

答

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

使用单引号也滤波器。这将过滤来自复选框的数据。

这不起作用 – Ravi

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

相关推荐