Angular Filter für Geschlecht mit Auswahl Drop-down

Question

Ich habe eine Datenbank, die nach Geschlecht gefiltert werden muss. Alles funktioniert gut.

Aber wenn ich nach Geschlecht filtern, wie weiblich Teil des Mannes ist, zeigt sich auch weiblich. Wenn ich weiblich auswähle, dann versteckt sich Männchen.

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

Dies scheint zu funktionieren.

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> 

Wenn Sie den Komparator auf true gesetzt, setzt es einen strengen Vergleich der tatsächlichen und erwartete, so ist es, dass ‚männlich‘ nicht die gleiche wie ‚weiblich‘ zu sehen ist. Aber dann erkennt es nicht den leeren Wert des Feldes "Nach Geschlecht". Um dies zu umgehen, können Sie festlegen, dass der Filter nur angewendet wird, wenn der Wert nicht leer oder nicht definiert ist.

Hoffe, das hilft.

Answer 2

From doc

Auswählen einer Teilmenge von Elementen aus array und gibt es als ein neues Array.

Es funktioniert wie String.Contains Methode. Wenn Sie also male aus dem Dropdown-Menü auswählen, werden alle Daten angezeigt, da female auch male Unterzeichenfolge enthält.

Answer 3

var app = angular.module("testApp", []); 
 
app.controller('testCtrl', function($scope){ 
 
\t vm = this; 
 
    
 
    vm.subjects = [ 
 
    
 
    \t \t \t \t \t { 
 
      name : "Alpha", 
 
      location:"TN", 
 
      age : "25", 
 
      gender:"female" 
 
      }, 
 
      \t { 
 
      name : "Beta", 
 
      location:"TN", 
 
      age : "44", 
 
      gender:"male" 
 
      }, 
 
      \t { 
 
      name : "Gamma", 
 
      location:"KE", 
 
      age : "20", 
 
      gender:"female" 
 
      }, 
 
      \t { 
 
      name : "Theta", 
 
      location:"AN", 
 
      age : "22", 
 
      gender:"female" 
 
      }, 
 
    
 
    
 
    ]; 
 
    
 
    angular.forEach(vm.subjects, function(subject){ \t 
 
    \t if(parseInt(subject.age) <= 25){ 
 
    \t 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>

try this:

<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

Eigentlich Filter geben Sie das Ergebnis auf der Grundlage der übereinstimmenden Elemente.So weibliche Zeilen werden angezeigt, wenn Sie männlich aus Drop-down wählen, weil "weiblich" Wort das "männliche" Wort enthält.