Checkboxlist ng-repeat filter dynamisch angularjs

Ich versuche in AngularJS die Mitarbeiterdetails mit dynamischen Filter (Location - Wert wie US, IN, CA etc ..) als Checkboxliste basierend auf den Daten aus der DB zu bekommen. Ich habe mehrere Wege ohne Erfolg ausprobiert. Bitte helfen Sie den dynamischen Filter von Checkboxlist zu erreichen.Checkboxlist ng-repeat filter dynamisch angularjs

My Codebeispiel unten:

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

Quelle

2016-08-01 Ravi

Nach bestem Wissen und Gewissen, Filter funktionieren nicht auf diese Weise. Sie müssen eine tatsächliche Filtermethode definieren (nicht nur eine Bereichsvariable, wie Sie es tun). Überprüfen Sie die Dokumentation. Hier haben Sie eine gute Beschreibung und ein sehr einfaches Beispiel, das Ihren Anforderungen entspricht: https://docs.angularjs.org/api/ng/filter/filter – FDavidov

@FDavidov das stimmt, aber der Filter, den @Ravi verwendet, stammt aus der Abhängigkeit ''ui.unique'', dass er in sein Modul gespritzt hat und so muss es nicht definiert werden. Diese Abhängigkeit wird jedoch abgeschrieben, weshalb meine Frage ist, warum eine abgeschriebene Abhängigkeit verwendet werden soll. –

Ich habe einen Spiegel Ihres Problems erstellt, bitte werfen Sie einen Blick darauf. Ich denke, es sollte in deiner Situation funktionieren.

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>

EDIT 2

Dieser Code wird alle Werte angezeigt werden, wenn keine der Kontrollkästchen aktiviert ist.

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

Quelle

2016-08-01 05:41:24

wenn ich den Code überarbeitet habe, habe ich den Fehler gemacht, aber in meinem tatsächlichen Code haben die ng-app und ng-Controller in Body-Tag. – Ravi

Danke für Ihren Code, es funktioniert für mich, aber standardmäßig wird nach Standort als "US" gefiltert, aber beim erstmaligen Laden möchte ich alle Datensätze ohne Filter anzeigen. Auch der Filter funktioniert ohne ng-change = "repopulate()" – Ravi

Hallo @Ravi, Bitte beachten Sie meine aktualisierte 'EDIT2' Code. Dieser Code zeigt alle Ergebnisse an, wenn keine der Checkboxen ausgewählt ist und wenn eine davon ausgewählt ist, dann werden die Ergebnisse entsprechend angezeigt. –

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

Verwenden Sie die Filter auch mit einfachen Anführungszeichen. Dies wird die Daten aus dem Kontrollkästchen filtern.

Quelle

2016-08-01 05:18:36

das funktioniert nicht – Ravi

Checkboxlist ng-repeat filter dynamisch angularjs

Antwort

Verwandte Themen