Как отфильтровать выделение с помощью ng-options в Angular?

Я написал следующее доказательство концепции приложения 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'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>

Мое приложение для голосования отображает список имен кандидатов вместе с профилем каждого кандидата, который в данном случае состоит из имени кандидата и пола.

Для целей этого вопроса, пожалуйста, сделайте вид, что список кандидатов на выбор извлекается из удаленного источника данных, но будет следовать тому же формату, что и в примере.

Предположим, что незадолго до проведения выборов будет принята конституционная поправка, согласно которой следующим президентом США должна быть женщина. Предположим, что источник данных не может быть обновлен вовремя к выборам, и начальник сказал мне: «Я слышал, что с Angular вы можете произвольно выбирать, какие элементы из источника данных появляются в форме, используя фильтр. бывает!»

Следуя нескольким примерам, которые я видел в Интернете, я написал приведенный выше код, но он больше не отображает ни одного кандидата. Что я сделал не так?

Как я могу отфильтровать параметры в списке выбора, используя угловой фильтр?

Ответы на вопрос(3)

Ваш ответ на вопрос