複選框列表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>

來源

2016-08-01 Ravi

據我所知，過濾器不工作方式。你必須定義一個實際的過濾方法（不是像你所做的那樣只使用一個範圍變量）。檢查文檔。在這裏你有一個很好的描述和非常簡單的例子，可以滿足你的需求：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>

來源

2016-08-01 05:41:24

當我修改了代碼時，我犯了錯誤，但在我的實際代碼中，body標籤中包含ng-app和ng-controller。 – Ravi

感謝您的代碼，它爲我工作，但默認情況下，它按位置過濾爲「美國」，但在初始加載時，我想顯示所有記錄而不使用任何過濾器。此外，過濾器沒有ng-change =「repopulate（）」 – Ravi

Hi @Ravi，請參閱我更新的EDIT2代碼。如果沒有選中該複選框，並且選擇了任何一個複選框，則此代碼將顯示所有結果，然後它將根據此結果顯示結果。 –

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

使用單引號也濾波器。這將過濾來自複選框的數據。

來源

2016-08-01 05:18:36

這不起作用 – Ravi

複選框列表ng-repeat過濾器動態angularjs

回答

相關問題