AngularJs |テキストボックスと同じ名前の複数のチェックボックスによるフィルタリング

AngularJSの新機能です。テキストボックスでリストを検索できますが、チェックボックスでは検索できません。AngularJs |テキストボックスと同じ名前の複数のチェックボックスによるフィルタリング

ここに私のHTMLコードです。

<input id="search_keywords" ng-model="keyword" type="text" value="" placeholder="Keywords" name="search_keywords"> 
<input id="search_location" ng-model="location" type="text" value="" placeholder="Location" name="search_location">

とも

<input type="checkbox" ng-model="categories[category]" />Full Time</label> 
<input type="checkbox" ng-model="categories[category]" />Part Time</label> 
<input type="checkbox" ng-model="categories[category]" />Contract</label> 
<input type="checkbox" ng-model="categories[category]" />Freelance</label> 

<ul class="job-fillter-listings-wr"> 
<li class="job-list" ng-repeat="x in searchData | filter : {'keyword' : keyword, 'location' : location, 'categories' : categories } "> 
    <a href=""> 
     <div class="center-wr"> 
      <div class="all-job-list clearfix"> 
       <div class="job-title-section"> 
        <span class="job-title-"><i class="fa fa-star" aria-hidden="true"></i> | {{ x.keyword }}</span> 
       </div> 
       <div class="job-location">{{ x.location }}</div> 
      </div> 
     </div> 
    </a> 
</li> 
</ul> <!--job-fillter-listings-wr-->

角度JSコードは、どのようにしても、チェックボックスでリストをフィルタリングすることができ、同じ形式でチェックボックスを

<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.controller('arrCtrl', function($scope) { 
    $scope.searchData = [ 
          { 
           "keyword": "Sr. Front-End Developer", 
           "categories": "Part Time", 
           "location": "Toronto" 
          }, 
          { 
           "keyword": "Sr. Developer/Architect", 
           "categories": "Full Time", 
           "location": "Toronto" 
          }, 
          { 
           "keyword": "Sr. .NET Developer", 
           "categories": "Contract", 
           "location": "Pickering" 
          }, 
          { 
           "keyword": "Business Analyst (Contract)", 
           "categories": "Contract,Freelance", 
           "location": "Pickering" 
          } 
         ] 
}); 
</script>

使用して？

おかげ

出典

2016-12-15 shubham jain

に役立つと思います。

var app = angular.module('myApp', []); 
 
app.controller('arrCtrl', function($scope) { 
 
    $scope.categories = ''; 
 
    $scope.category = []; 
 
    $scope.checkeChange = function(checked, val) { 
 
    $scope.categories = ''; 
 
    for (var i in $scope.category) { 
 
     if ($scope.category[i]) { 
 
     if ($scope.categories != '') 
 
      $scope.categories += ',' 
 
     $scope.categories += $scope.category[i] 
 
     } 
 
    } 
 
    } 
 
    $scope.searchData = [{ 
 
    "keyword": "Sr. Front-End Developer", 
 
    "categories": "Part Time", 
 
    "location": "Toronto" 
 
    }, { 
 
    "keyword": "Sr. Developer/Architect", 
 
    "categories": "Full Time", 
 
    "location": "Toronto" 
 
    }, { 
 
    "keyword": "Sr. .NET Developer", 
 
    "categories": "Contract", 
 
    "location": "Pickering" 
 
    }, { 
 
    "keyword": "Business Analyst (Contract)", 
 
    "categories": "Contract,Freelance", 
 
    "location": "Pickering" 
 
    }] 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp"> 
 
    <div ng-controller="arrCtrl"> 
 
    <input id="search_keywords" ng-model="yourFilter.keyword" type="text" value="" placeholder="Keywords" name="search_keywords"> 
 
    <input id="search_location" ng-model="location" type="text" value="" placeholder="Location" name="search_location"> 
 
    <input type="checkbox" ng-model="category[0]" ng-true-value="Full Time" ng-change="checkeChange()" />Full Time 
 
    <input type="checkbox" ng-model="category[1]" ng-change="checkeChange()" ng-true-value="Part Time" />Part Time 
 
    <input type="checkbox" ng-model="category[2]" ng-change="checkeChange()" ng-true-value="Contract" />Contract 
 
    <input type="checkbox" ng-model="category[3]" ng-change="checkeChange()" ng-true-value="Freelance" />Freelance 
 
    <h5>Search by - {{categories}}</h5> 
 
    <ul class="job-fillter-listings-wr"> 
 
     <li class="job-list" ng-repeat="x in searchData | filter : {'keyword' : keyword, 'location' : location, 'categories' : categories } "> 
 
     <a href=""> 
 
      <div class="center-wr"> 
 
      <div class="all-job-list clearfix"> 
 
       <div class="job-title-section"> 
 
       <span class="job-title-"><i class="fa fa-star" aria-hidden="true"></i>{{ x.keyword }}</span> 
 
       </div> 
 
       <div class="job-location">{{ x.location }}</div> 
 
      </div> 
 
      </div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    <!--job-fillter-listings-wr--> 
 
    </div> 
 
</body>

出典

2016-12-15 10:45:07

おかげでたくさん持っています。その作業:-) –

Here the Demo For your question

Here

私はそれは私があなたを助けるかもしれないサンプルを作ったあなたに

出典

2016-12-15 10:26:26

が、あなたの参照では、各チェックボックスは、異なるモデル名に –

AngularJs |テキストボックスと同じ名前の複数のチェックボックスによるフィルタリング

答えて

関連する問題