AngularJS에서 객체 데이터 소스를 ng-repeat으로 정렬하려면 어떻게 해야 합니까?
다음과 같은 사용자가 있다고 가정합니다.
$scope.users = {
"2": {
email: 'john@gmail.com',
name: 'John'
},
"3": {
email: 'elisa@gmail.com',
name: 'Elisa'
}
}
작성하려고 합니다.<select>
다음 옵션과 함께 사용합니다.
<option value="3">Elisa</option>
<option value="2">John</option>
즉, 사용자를 이름별로 정렬해야 합니다.
구문을 사용하여 다음을 시도했지만 작동하지 않습니다.
<option ng-repeat="(user_id, user) in users | orderBy:'user.name'"
value="{{ user.id }}">
{{ user.name }}
</option>
제가 무엇을 빠뜨리고 있나요?
에 솔루션을 제안하지 마십시오.ng-options
와 호환성이 없는 것을 사용함에 따라ng-options
.
링크의 스레드에서 작성자의 답변 참조를 확인할 수 있지만 SO에 대해 언급한 해결 방법 중 하나를 제시하면 좋을 것 같습니다.
기술적으로 구현되지 않은 것은 사실이지만, 데이터 모델을 약간 변경할 의향이 있다면 쉽게 해결할 수 있습니다. 커스텀 필터를 사용하여 오브젝트 속성 배열을 생성합니다(교체하지 않고).키 필드를 오브젝트(위의 경우 ID)에 추가하면 원하는 동작을 얻을 수 있습니다.
app.filter("toArray", function(){
return function(obj) {
var result = [];
angular.forEach(obj, function(val, key) {
result.push(val);
});
return result;
};
});
...
$scope.users = {
1: {name: "John", email: "john@gmail.com", id: 1},
2: {name: "Elisa", email: "elisa@gmail.com", id: 2}
};
사용할 수 있는 ng-repeat 디렉티브는 다음과 같습니다.
<option value="{{user.id}}" ng-repeat="user in users | toArray | orderBy:'name'">{{user.name}}</option>
그리고 여기 플렁크러가 있다.
주의:orderBy
필터 테이크name
파라미터로서가 아니라user.name
.
아쉽게도,id
개체에 대한 속성이 포함된 개체의 키와 일치하지 않을 수 있습니다.
답변에서 언급하신 링크에는 다음과 같은 솔루션을 생성하는 제안도 있습니다.id
사용자 오브젝트에는 속성이 포함되어 있습니다만, 이 접근법은 (데이터 리플리케이션을 도입하는 데 드는 비용이) 조금 덜 드는 것 같습니다.
좋아, 답을 찾았어
승인된 답변에 추가하고 데이터 형식을 확인하면 다음과 같이 데이터를 변환해야 합니다.
app.filter('myFilterUsers',function(){
return function(data)
{
var newRes = [];
angular.forEach(data,function(val,key){
val["id"] = key; //Add the ID in the JSON object as you need this as well.
newRes.push(val);
});
return newRes;
}
});
언급URL : https://stackoverflow.com/questions/14955146/how-to-sort-object-data-source-in-ng-repeat-in-angularjs
'programing' 카테고리의 다른 글
HttpClient에서 JSON 문자열을 해석하려면 어떻게 해야 하나요? (0) | 2023.03.15 |
---|---|
Angularjs: ng-options 그룹화 기준 (0) | 2023.03.15 |
Mongodb에서의 문서 갱신 및 반환 (0) | 2023.03.15 |
ReactJs: 여러 번 버튼 누름 방지 (0) | 2023.03.15 |
리액트 라우터를 사용하여 페이지를 새로고침하려면 어떻게 해야 하나요? (0) | 2023.03.15 |