compare two variable in angularjs

Question

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>

Sabacc · Accepted Answer · 2014-08-11 08:12:21Z

1

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

answered Aug 11, 2014 at 8:12

Sabacc

7896 silver badges13 bronze badges

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

2 Comments

Viveka Over a year ago

actually i want to implement it in custom filter but not getting any idea :(

Sabacc Over a year ago

Why do you want to implement a custom filter?

sylwester · Accepted Answer · 2014-08-11 09:39:16Z

1

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>

edited Aug 11, 2014 at 9:39

answered Aug 11, 2014 at 8:12

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

5 Comments

Viveka Over a year ago

i want to implement it in custom filter

sylwester Over a year ago

@Viveka or if you want do that completely without angular $filter please see here jsbin.com/yoheg/4

sylwester Over a year ago

@Viveka to compare to values just use value_a===value_b

Viveka Over a year ago

this is my code but its not working in plunker. im new in angularjs so i dont know to convert my code to plunker. I tried but it is not working.

Viveka Over a year ago

but my code is correct my only mistake is with this male filter

Collectives™ on Stack Overflow

compare two variable in angularjs

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related