<!DOCTYPE html>
<html>
<head>
<title>de.W3docs.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body data-ng-app="MyModule" data-ng-controller="MyController">
<select data-ng-model="filterGender">
<option value='male'>Männlich</option>
<option value='female'>Weiblich</option>
</select>
<ul>
<li data-ng-repeat="user in users | gender:filterGender" data-ng-bind="user.name"></li>
</ul>
<script>
angular.module('MyModule', [])
.controller('MyController', function($scope){
$scope.users = [
{name: 'Mike', gender: 'male', age: 23},
{name: 'Jenifer', gender: 'female', age: 32},
{name: 'Tom', gender: 'male', age: 14},
{name: 'Hayk', gender: 'male', age: 18},
{name: 'Eliana', gender: 'female', age: 28}
];
})
.filter('gender', function(){
return function(users, gender){
if(!gender){
return users;
}
var arr = [];
angular.forEach(users, function(v){
if(v.gender === gender){
arr.push(v);