Como filtrar uma seleção com ng-opções no Angular?
Escrevi a seguinte prova de conceito de um aplicativo Angular que permite que uma pessoa vote no Presidente dos EUA.
<!DOCTYPE html>
<html ng-app="ElectionApp"">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
var ElectionApp = angular.module("ElectionApp", []);
var ElectionController = ElectionApp.controller("ElectionController", [function () {
// Pretend that this data came from an outside data-source.
this.candidates = {
"14837ac3-5c45-4e07-8f12-5771f417ca4c": {
name: "Alice",
gender: "female"
},"333eb217-c8d1-4b94-91a4-22a3770bbb22": {
name: "Bob",
gender: "male"
}
};
this.vote = function () {
// TODO: Record the user's vote.
};
}]);
</script>
</head>
<body ng-controller="ElectionController as ctrl">
Who would you like to elect President? <br />
<select
ng-model="ctrl.selection"
ng-options="person as person.name for (id, person) in ctrl.candidates | filter{gender:'female'}">
</select>
<input type="button" value="Vote!" ng-submit="ctrl.vote();" />
<h2>Candidate Profiles</h2>
<div ng-repeat="candidate in ctrl.candidates">
{{candidate.name}}, {{candidate.gender}}
</div>
</body>
</html>
Meu aplicativo de votação exibe uma lista dos nomes dos candidatos, juntamente com um perfil para cada candidato, que, nesse caso, consiste no nome e no sexo do candidato.
Para os fins desta pergunta, finja que a lista de candidatos a escolher é buscada em uma fonte de dados remota, mas seguirá o mesmo formato do exemplo.
Suponha que, pouco antes da realização da eleição, seja aprovada uma emenda constitucional exigindo que o próximo presidente dos EUA seja do sexo feminino. Suponha que a fonte de dados não possa ser atualizada a tempo da eleição e o chefe me disse: "Ouvi dizer que, com o Angular, você pode escolher arbitrariamente quais itens da fonte de dados aparecem no formulário usando um filtro. acontecer!"
Seguindo alguns exemplos que vi on-line, escrevi o código acima, mas ele não exibe mais nenhum candidato. O que eu fiz errado?
Como posso filtrar as opções em uma lista de seleção usando um filtro Angular?