CODEWITHSUNDEEP
angularjs
Viveka
Viveka

Reputation: 237

compare two variable in angularjs

in my code iam using custom filter for filtering based on gender(male female).But when i click male value female values are also displayed since female value contains male in it. And when i click female it filters successfully. This is my code.

app.filter('myFilter', function() {
  return function(items, filterby, filterbyc) {

    var filtered = [];
    var filtermatch = new RegExp(filterby, 'i');

    angular.forEach(items, function(value) {
      if ((filtermatch.test(value.gender))) {
        filtered.push(value);
      }
      return filtered;
    })
  };
});

so what function other than .test can i use to compare the values so that when comparing male and female values it wont take male from female.

This is my html code

<ul id="result">
  <li ng-repeat="x in details | myFilter:filterby">
    <div>Name :{{x.name }}</div>
    <div>Address : {{x.address }}</div>
    <div>Gender: {{x.gender}}</div>
    <div>Country: {{x.country }}</div>
    <div>Agree: {{x.agree }}</div>
  </li>
</ul>

Upvotes: 0

Views: 1518

Answers (2)

sylwester
sylwester

Reputation: 16498

You don't have to crate for that custom filter please see here http://jsbin.com/yoheg/5/edit

just add third parameter to filter true

<body ng-app="app">
  <div ng-controller="firstCtrl">
    <select ng-model="gender_search">
      <option value="male">Male </option>
       <option value="female">Famale </option>
    </select>
  <ul id="result">

  <li ng-repeat="x in details  | filter: {gender:gender_search}:true       ">
    <div>Name :{{x.name }}</div>
    <div>Address : {{x.address }}</div>
    <div>Gender: {{x.gender}}</div>
    <div>Country: {{x.country }}</div>
    <div>Agree: {{x.agree }}</div>
  </li>
</ul>
      </div>
</body>

if you really have to create custom filter you can do that this way : http://jsbin.com/yoheg/2/edit

app.filter('myFilter', function($filter) {
  return function(items, search) {

    if (!search) {
    return items;
     }
    return  $filter('filter')(items, {gender : search}, true);

  };
});

HTML:

      <ul id="result2">

  <li ng-repeat="x in details | myFilter : gender_search  ">
    <div>Name :{{x.name }}</div>
    <div>Address : {{x.address }}</div>
    <div>Gender: {{x.gender}}</div>
    <div>Country: {{x.country }}</div>
    <div>Agree: {{x.agree }}</div>
  </li>
</ul>

OPTION 3

Without angularjs $fitler: http://jsbin.com/yoheg/4/edit

JS:

app.filter('myFilter', function($filter) {
  return function(items, search) {

    if (!search) {
    return items;
     }

    var filtered = [];

    angular.forEach(items, function(item){

      if (item.gender === search)
        {

          filtered.push(item);
        }

    });
    return filtered;



  };
});

html:

 <ul id="result2">

  <li ng-repeat="x in details | myFilter : gender_search  ">
    <div>Name :{{x.name }}</div>
    <div>Address : {{x.address }}</div>
    <div>Gender: {{x.gender}}</div>
    <div>Country: {{x.country }}</div>
    <div>Agree: {{x.agree }}</div>
  </li>
</ul>

Upvotes: 1

Sabacc
Sabacc

Reputation: 789

Why don't you use the provided filter method for this scenario?

<ul id="result">
  <li ng-repeat="x in details | filter:{gender:filterby}:true">
    <div>Name :{{x.name }}</div>
    <div>Address : {{x.address }}</div>
    <div>Gender: {{x.gender}}</div>
    <div>Country: {{x.country }}</div>
    <div>Agree: {{x.agree }}</div>
  </li>
</ul>

with the :true you configure the filter value to be be compared using equal (instead of subsctring). The filter should now only show males when filterby has the value "male".

Upvotes: 1

Related Questions