Question

在我的代码中使用自定义过滤器进行基于性别（男性女性）的过滤。但是当我点击男性值时，女性值也会显示，因为女性值包含男性。当我点击女性它成功过滤。这是我的代码。

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;
    })
  };
});

所以除了.test之外的其他功能我可以用它来比较这些值，这样当比较男性和女性的价值时，它不会从男性那里接受男性。

这是我的HTML代码

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

Answer 1

为什么不在此方案中使用提供的过滤方法？

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

使用：true ，您可以使用相等（而不是子字符串）来配置要比较的过滤器值。过滤器现在只应在过滤器具有值“男性”时显示男性。

Answer 2

您不必为自定义过滤器创建条件，请参阅此处http://jsbin.com/yoheg/5/edit

只需添加第三个参数即可过滤真实的

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

如果您真的需要创建自定义过滤器，则可以这样做：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>

选项3

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

比较angularjs中的两个变量

2 个答案: