AngularJS에서 객체 데이터 소스를 ng-repeat으로 정렬하려면 어떻게 해야 합니까?

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