Я написал следующее доказательство концепции приложения Angular, которое позволяет человеку голосовать за президента США.
<!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 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>
Мое приложение для голосования отображает список имен кандидатов вместе с профилем для каждого кандидата, который в этом случае состоит из имени кандидата и пола.
В целях этого вопроса, пожалуйста, притворитесь, что список кандидатов на выбор выбирается из удаленного источника данных, но будет следовать тому же формату, что и пример.
Предположим, что незадолго до проведения выборов будет принята конституционная поправка, в соответствии с которой следующий президент США должен быть женщиной. Предположим, что источник данных не может быть обновлен вовремя для выборов, и босс сказал мне: "Я слышал, что с помощью Angular вы можете произвольно выбрать, какие элементы из источника данных появятся в форме с использованием фильтра. Сделай это!"
После нескольких примеров, которые я видел в режиме онлайн, я написал код выше, но он больше не отображает ни одного кандидата. Что я сделал не так?
Как фильтровать параметры в списке выбора с помощью фильтра Angular?