AngularJs | Filter by text boxes and multiple checkboxes which have same name

Question

I am new in AngularJS. I am able to search the list by text boxes but not able with check-boxes.

Here is my HTML code.

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

and also using checkboxes in same form

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

Angular JS Code

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

How can I filter the list by checkbox also?

Thanks

Jithu Rajan · Accepted Answer · 2016-12-15 10:45:07Z

I made a sample which might help you.

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>

Suresh B · Accepted Answer · 2016-12-15 10:26:26Z

0

Here the Demo For your question

Here

I think it will help you

answered Dec 15, 2016 at 10:26

Suresh B

1,6521 gold badge18 silver badges35 bronze badges

1 Comment

shubham jain Over a year ago

but in your reference, each checkbox have different model name

Collectives™ on Stack Overflow

AngularJs | Filter by text boxes and multiple checkboxes which have same name

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest