Angular JS : Filter using textbox and Checkbox

Question

I'm New with angularJS and I just want to filter my data using textbox together with checkbox.

Here is my data:

  $scope.array = [
    {name: 'Tobias', lname: 'TLname', company: 'x'},
    {name: 'Jeff', lname: 'JLname', company: 'x'},
    {name: 'Brian', lname: 'BLname', company: 'x'},
    {name: 'Igor', lname: 'ILname', company: 'y'},
    {name: 'James', lname: 'JLname', company: 'z'},
    {name: 'Brad', lname: 'BLname', company: 'y'}
  ];

All I want is if I going to choose x from checkbox it will show the rows related with Tobias Jeff Brian and if I'm going to uncheck the checkbox and type br, Brian and Brad will show but if I'm going to check the x checkbox only Bryan should show.

Thanks in advance.

link · Accepted Answer · 2014-06-27 06:12:28Z

8

You would use filters to accomplish this.

See fiddle: http://jsfiddle.net/w4XqV/16/

Markup:

<div ng-app="app" ng-controller="mainCtrl">
    <div>Search by Name: <input type="text" ng-model="filters.search"></div>
       <div>Show only Company X: <input type="checkbox" ng-model="filters.x" ng-change="actions.updateCompany()"/>           
       </div>
       <div ng-repeat="arr in array | filter:filters.search | filter:{company: filters.company}">
           <span ng-bind="arr.name"></span>
       </div>
</div>

JavaScript:

var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
    $scope.filters = {
        x: false,
        company: '',
        search: ''
    };

    $scope.actions = {
        updateCompany: function () {
            if($scope.filters.x) {
                $scope.filters.company = 'x';
            } else {
                 $scope.filters.company = '';   
            }
        }
    };


    $scope.array = [
    {name: 'Tobias', lname: 'TLname', company: 'x'},
    {name: 'Jeff', lname: 'JLname', company: 'x'},
    {name: 'Brian', lname: 'BLname', company: 'x'},
    {name: 'Igor', lname: 'ILname', company: 'y'},
    {name: 'James', lname: 'JLname', company: 'z'},
    {name: 'Brad', lname: 'BLname', company: 'y'}
  ];
});

Hope this helps.

answered Jun 27, 2014 at 6:12

link

2,5101 gold badge18 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3274033 Over a year ago

Hi, Could it be possible if I check x and y it will show the all the related data on it? please see: jsfiddle.net/w4XqV/17

user3274033 Over a year ago

can somebody help me?

user3274033 Over a year ago

please help me how to show related records if I check x and y

Babak Bazrafshan · Accepted Answer · 2017-06-03 19:05:28Z

0

<div ng-controller="ctrl2">
<div>
  <input type="text" ng-model="myfilter" placeholder="filter">
  <br>avilable:<input type="checkbox" ng-model="check" checked value="avilable">
  <br>
  <span ng-click="sortby('name')">name</span><span ng-click="sortby('country')">country</span>
</div>
<p></p>
<div class="row1" ng-repeat="x in names | orderBy:myorder | filter:check | filter:myfilter">
  <span class="row2">
  {{x.name}}
</span>
  <span class="row2">
  {{x.country}}
</span>
</div>
<h1>{{myfilter}}</h1>

answered Jun 3, 2017 at 19:05

Babak Bazrafshan

1

Comments

Babak Bazrafshan · Accepted Answer · 2017-06-03 19:09:02Z

0

app.controller('ctrl2', function ($scope) {
$scope.sortby = function (x) {
    $scope.myorder = x;
}

$scope.names = [
    { name: 'Jani', country: 'Norway', available: true },
    { name: 'Carl', country: 'Sweden', available: false },
    { name: 'Margareth', country: 'England', available: true },
    { name: 'Hege', country: 'Norway', available: true },
    { name: 'Joe', country: 'Denmark', available: false },
    { name: 'Gustav', country: 'Sweden', available: false },
    { name: 'Birgit', country: 'Denmark', available: false },
    { name: 'Mary', country: 'England', available: true },
    { name: 'Kai', country: 'Norway', available: false }
];

});

answered Jun 3, 2017 at 19:09

Babak Bazrafshan

1

Collectives™ on Stack Overflow

Angular JS : Filter using textbox and Checkbox

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related