チェックボックスリストng-repeatフィルタダイナミックanglejs

DBから取得したデータに基づいてチェックボックスリストとしてダイナミックフィルタ（場所 - US、IN、CAなどのような値）を使用して従業員の詳細を表示しようとしています。私は成功せずに複数の方法を試みました。チェックボックスリストからダイナミックフィルタを有効にするのを助けてください。チェックボックスリストng-repeatフィルタダイナミックanglejs

以下の私のコードサンプル：

<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'''をモジュールに注入したので、定義する必要はありません。しかし、この依存関係は償却されるので、私の質問は減価償却された依存関係を使用する理由です。 –

問題のミラーを作成しましたので、ご覧ください。私はそれがあなたの状況で動作するはずだと思います。

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

Plunker

EDIT 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

私はコードを改良したとき、私は間違いを犯しましたが、実際のコードではng-appとng-controllerがbodyタグにあります。 – Ravi

あなたのコードをありがとう、それは私のために働いていますが、デフォルトでは "米国"として場所によってフィルタリングされていますが、初期の負荷で、私はフィルタなしですべてのレコードを表示したい。また、フィルタはng-change = "repopulate（）"なしで動作しています – Ravi

こんにちは@Ravi、私の更新された 'EDIT2'コードを見てください。チェックボックスが選択されていない場合、このコードはすべての結果を表示し、いずれかが選択されている場合は、その結果を表示します。 –

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

は、単一引用符でフィルタを使用してください。これにより、チェックボックスからデータがフィルタリングされます。

出典

2016-08-01 05:18:36

これは動作しません – Ravi

チェックボックスリストng-repeatフィルタダイナミックanglejs

答えて

関連する問題