Question

I have a database that need to be filtered by gender. Everything is working fine.

But when i filter by gender, as female is part of male, female is also showing up. If i pick female, then male is hiding off.

Here is my jsfiddle link

<select name="" id="" ng-model="test.filterByGender">
<option value="">By Gender</option>
  <option value="female">Female</option>
  <option value="male">Male</option>
</select>

Answer 1

From doc

从array中选择项目的子集，并将其作为新数组返回。

它的工作方式与String.Contains方法类似。因此，当您从下拉列表中选择male时，它会显示所有数据，因为female还包含male子字符串。

Answer 2

这似乎有效。

https://jsfiddle.net/kg2kscnw/14/

<tr ng-repeat="subject in test.subjects | filter:test.filterByState | filter:(!!test.filterByGender || undefined) && test.filterByGender:true | filter:test.filterByAge">
    <td>{{subject.name}}</td>
    <td>{{subject.gender}}</td>
    <td>{{subject.age}}</td>
 </tr>

如果将比较器设置为true，它会设置实际和预期的严格比较，因此可以看到“男性”与“女性”不同。但后来它无法识别“按性别”字段的空值。为了解决这个问题，您可以告诉过滤器仅在值不为空或未定义时应用。

希望这有帮助。

Answer 3

var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
	vm = this;
  
  vm.subjects = [
  
  					{
            name : "Alpha",
            location:"TN",
            age : "25",
            gender:"female"
            },
            	{
            name : "Beta",
            location:"TN",
            age : "44",
            gender:"male"
            },
            	{
            name : "Gamma",
            location:"KE",
            age : "20",
            gender:"female"
            },
            	{
            name : "Theta",
            location:"AN",
            age : "22",
            gender:"female"
            },
  
  
  ];
  
  angular.forEach( vm.subjects, function(subject){ 	
  	if(parseInt(subject.age) <= 25){
    	subject.ageFilterCriteria = '<25'
    }
    else{
    subject.ageFilterCriteria = '>25'
    }
  
  })
  console.log(vm.subjects);
  vm.filterByAge = '';
  vm.filterByState='';
  vm.filterByGender='';
  
  vm.setFlag = function(value){
     if(value)
       vm.flag = true;
    else
       vm.flag = false;
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl as test">
<select name="" id="" ng-model="test.filterByState">
<option value="">Select a state</option>
  <option value="TN">TamilNadu</option>
  <option value="KE">Kerala</option>
  <option value="AN">Andra Pradesh</option>
</select>
<select name="" id="" ng-model="test.filterByGender" ng-change="test.setFlag(test.filterByGender)">
<option value="">By Gender</option>
  <option value="female">Female</option>
  <option value="male">Male</option>
</select>
<select name="" id="" ng-model="test.filterByAge">
<option value="">Select All</option>
  <option value="<25">Less Than 25</option>
  <option value=">25">Greater Than 25</option>
</select>
<table>
  <tr ng-repeat="subject in test.subjects |filter:{location:test.filterByState,ageFilterCriteria:test.filterByAge}| filter:{gender:test.filterByGender}:test.flag">
    <td>{{subject.name}}</td>
    <td>{{subject.gender}}</td>
    <td>{{subject.age}}</td>
  </tr>
</table>


</div>

试试这个：

  <select name="" id="" ng-model="test.filterByGender" ng-change="test.flag =true">
   <option value="">By Gender</option>
   <option value="female">Female</option>
   <option value="male">Male</option>
  </select>


   <tr ng-repeat="subject in test.subjects |filter:{location:test.filterByState,ageFilterCriteria:test.filterByAge}|
                                            filter:{gender:test.filterByGender}:test.flag">

Answer 4

实际上，过滤器会根据匹配的项目给出结果。当您从下拉列表中选择男性时会显示女性行，因为＆＃34;女性＆＃34;单词包含＆＃34;男性＆＃34;一句话。

Angular filter for gender using select dropdown

4 个答案: