[javascript] AngularJS 속성 별 정렬

Program / 글쓴이

내가하려는 것은 속성별로 일부 데이터를 정렬하는 것입니다. 여기에 내가 강인한 일을해야하지만 그렇지 않은 예가 있습니다.

HTML 부분 :

<div ng-app='myApp'>
    <div ng-controller="controller">
    <ul>
        <li ng-repeat="(key, value) in testData | orderBy:'value.order'">
            {{value.order}}. {{key}} -> {{value.name}}
        </li>
    </ul>
    </div>
</div>

JS 부분 :

var myApp = angular.module('myApp', []);

myApp.controller('controller', ['$scope', function ($scope) {

    $scope.testData = {
        C: {name:"CData", order: 1},
        B: {name:"BData", order: 2},
        A: {name:"AData", order: 3},
    }

}]);

그 결과 :

  1. A-> AData
  2. B-> BData
  3. C-> CData

… IMHO는 다음과 같아야합니다.

  1. C-> CData
  2. B-> BData
  3. A-> AData

내가 뭔가를 놓쳤습니까 (여기 에 실험 할 준비가 된 JSFiddle 이 있습니다)?

답변

AngularJS의 orderBy 필터는 객체없이 배열 만 지원합니다. 따라서 정렬을 수행하는 자체 작은 필터를 작성해야합니다.

또는 처리하는 데이터 형식을 변경하십시오 (영향을받은 경우). 객체를 포함하는 배열은 기본 orderBy 필터로 정렬 할 수 있습니다.

AngularJS에 대한 orderObjectBy 필터 는 다음과 같습니다 .

app.filter('orderObjectBy', function(){
 return function(input, attribute) {
    if (!angular.isObject(input)) return input;

    var array = [];
    for(var objectKey in input) {
        array.push(input[objectKey]);
    }

    array.sort(function(a, b){
        a = parseInt(a[attribute]);
        b = parseInt(b[attribute]);
        return a - b;
    });
    return array;
 }
});

보기에서의 사용법 :

<div class="item" ng-repeat="item in items | orderObjectBy:'position'">
    //...
</div>

이 예에서 객체는 위치 속성이 필요하지만 뷰의 정의에 따라 객체의 모든 속성 (정수 포함)을 유연하게 사용할 수 있습니다.

예제 JSON :

{
    "123": {"name": "Test B", "position": "2"},
    "456": {"name": "Test A", "position": "1"}
}

다음은 사용법을 보여주는 바이올린입니다.
http://jsfiddle.net/4tkj8/1/

답변

꽤 쉬워요 그냥 이렇게 해

$scope.props = [{order:"1"},{order:"5"},{order:"2"}]

ng-repeat="prop in props | orderBy:'order'"

답변

parseInt ()는 정수 값에 대해서만 작동한다는 것을 잊지 마십시오. 문자열 값을 정렬하려면 다음을 교체해야합니다.

array.sort(function(a, b){
  a = parseInt(a[attribute]);
  b = parseInt(b[attribute]);
  return a - b;
});

이것으로 :

array.sort(function(a, b){
  var alc = a[attribute].toLowerCase(),
      blc = b[attribute].toLowerCase();
  return alc > blc ? 1 : alc < blc ? -1 : 0;
});

답변

angular-JS ( https://github.com/angular/angular.js/blob/master/src/ng/filter/orderBy.js ) 코드에서 볼 수 있듯이 ng-repeat는 개체와 함께 작동하지 않습니다. 다음은 sortFunction을 사용한 해킹입니다.

http://jsfiddle.net/sunnycpp/qaK56/33/

<div ng-app='myApp'>
    <div ng-controller="controller">
    <ul>
        <li ng-repeat="test in testData | orderBy:sortMe()">
            Order = {{test.value.order}} -> Key={{test.key}} Name=:{{test.value.name}}
        </li>
    </ul>
    </div>
</div>

myApp.controller('controller', ['$scope', function ($scope) {

    var testData = {
        a:{name:"CData", order: 2},
        b:{name:"AData", order: 3},
        c:{name:"BData", order: 1}
    };
    $scope.testData = _.map(testData, function(vValue, vKey) {
        return { key:vKey, value:vValue };
    }) ;
    $scope.sortMe = function() {
        return function(object) {
            return object.value.order;
        }
    }
}]);

답변

http://docs.angularjs.org/api/ng.filter:orderBy 에 따르면 orderBy는 배열을 정렬합니다. 귀하의 경우에는 객체를 전달하므로 고유 한 정렬 기능을 구현해야합니다.

또는 배열 전달- 

$scope.testData = {
    C: {name:"CData", order: 1},
    B: {name:"BData", order: 2},
    A: {name:"AData", order: 3},
}

http://jsfiddle.net/qaK56/을 살펴보십시오.

답변

문제를 해결하려면 JSON 구조를 실제로 개선해야합니다.

$scope.testData = [
   {name:"CData", order: 1},
   {name:"BData", order: 2},
   {name:"AData", order: 3},
]

그럼 당신은 할 수 있습니다

<li ng-repeat="test in testData | orderBy:order">...</li>

문제는 (키, 값) 변수가 orderBy 필터에서 사용할 수 없으며 어쨌든 키에 데이터를 저장해서는 안된다는 것입니다.

답변

여기 내가 한 일이 있으며 작동합니다.
방금 문자열 화 된 객체를 사용했습니다.

$scope.thread = [
  {
    mostRecent:{text:'hello world',timeStamp:12345678 }
    allMessages:[]
  }
  {MoreThreads...}
  {etc....}
]

<div ng-repeat="message in thread | orderBy : '-mostRecent.timeStamp'" >

내가 텍스트로 정렬하고 싶다면 

orderBy : 'mostRecent.text'