1. 首页
  2. 问答
  3. AngularJs |按文本框和多个相同名称的复选框进行过滤

AngularJs |按文本框和多个相同名称的复选框进行过滤

2016-12-15 63 views
1

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

回答

1

我做了一个样本，其可能会帮助您。

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

+0

非常感谢。它的工作:-) –

相关问题

 相关问题