使用选择下拉列表的性别角度过滤器

Angular filter for gender using select dropdown

本文关键字：过滤器 选择 下拉列表      更新时间：2023-09-26

我有一个数据库需要按性别过滤。一切正常。

但是当我按性别过滤时，因为女性是男性的一部分，女性也出现了。如果我选择雌性，那么雄性就躲起来了。

这是我的jsfiddle链接

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

这似乎有效。

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，则会设置实际和预期的严格比较，因此可以看到"男性"与"女性"不同。 但是，它没有认识到"按性别"字段的空值。 为了解决这个问题，您可以告诉过滤器仅在值不为空或未定义时才应用。

希望这有帮助。

来自文档

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

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

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

实际上过滤器根据匹配的项目给出结果。因此，当您从下拉列表中选择男性时，将显示女性行，因为"女性"单词包含"男性"单词。

相关文章：