Angular에서 ng-options를 사용하여 선택을 필터링하려면 어떻게 해야 합니까?
미국 대통령에 투표할 수 있는 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를 사용하면 필터를 사용하여 데이터 소스의 항목을 임의로 선택할 수 있다고 들었습니다.실현시켜라!
인터넷에서 본 몇 가지 예를 따라 위의 코드를 작성했지만 더 이상 후보가 표시되지 않습니다.제가 무엇을 잘못했나요?
Angular 필터를 사용하여 선택 목록의 옵션을 필터링하려면 어떻게 해야 합니까?
filter 키워드 뒤에 ":"를 잊어버렸습니다.
<select
ng-model="ctrl.selection"
ng-options="person as person.name for person in ctrl.candidates | filter:{gender:'female'}">
</select>
조금 늦었을 수도 있지만, 정보를 찾는 다른 분들을 위해서 이걸 쓰고 있어요.
$scope.deliveryAddresses = data;
여기서 데이터는 복잡한 Json ID, 이름 및 시/군/군/군/군/군/군/군/군/군/군/군/군/군/군/군/군/군/군/군/군/군/군/얻다
아래 토막과 함께 Html 페이지에서 사용하고 있습니다.
ng-options="address.name for address in deliveryAddresses | filter:{name:search} track by address.id
여기서 검색은 텍스트 상자에 대한 참조입니다.심플하고 효율적입니다.
도움이 됐으면 좋겠는데
filter는 어레이에서만 동작할 수 있습니다.
다만, 커스텀 필터를 작성할 수 있습니다.
ElectionApp.filter('females', [ function() {
return function (object) {
var array = [];
angular.forEach(object, function (person) {
if (person.gender == 'female')
array.push(person);
});
return array;
};
}]);
그리고 글을 쓴다.
ng-options="name as person.name for (id, person) in ctrl.candidates | females">
언급URL : https://stackoverflow.com/questions/33290828/how-to-filter-a-select-with-ng-options-in-angular
'programing' 카테고리의 다른 글
| AngularJS 태그 링크가 작동하지 않음 (0) | 2023.03.10 |
|---|---|
| ASMX, ASPX 또는 ASHX에 대한 .NET AJAX 콜 (0) | 2023.03.05 |
| LISTAGG 함수: "문자열 연결 결과가 너무 깁니다." (0) | 2023.03.05 |
| 재료.UI 선택 설정 값이 항상 범위를 벗어남 (0) | 2023.03.05 |
| 커스터마이즈된HTPHeader 필드를 갖춘 JSON Post (0) | 2023.03.05 |