속성별 AngularJS 정렬

속성별 AngularJS 정렬

제가 하려는 것은 데이터를 속성별로 분류하는 것입니다.여기 내가 해야 한다고 생각했지만 효과가 없는 예가 있다.

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},
    }

}]);

그 결과:

3. A - > AData
4. B -> BData
5. C -> CData

IMHO는 다음과 같이 됩니다.

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

뭔가 빠뜨린 것이 있습니까(JSFiddle을 사용해 보겠습니다).

AngularJS의 orderBy 필터는 객체 없이 어레이만 지원합니다.따라서 분류를 할 수 있는 작은 필터를 직접 작성해야 합니다.

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

Angular에 대한 my orderObjectBy 필터입니다.JS:

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()는 Integer 값에만 적용됩니다.문자열 값을 정렬하려면 이 값을 스왑해야 합니다.

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-module은 오브젝트에서는 동작하지 않습니다.여기 sort Function에 대한 해킹이 있습니다.

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>

문제는 (key, value) 변수를 orderBy 필터에 사용할 수 없다는 것입니다.또한 데이터를 키 안에 저장해서는 안 됩니다.

이게 내가 한 일이고 효과가 있다.
그냥 끈으로 묶은 물건을 사용했어요.

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

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

텍스트로 정렬하고 싶다면

orderBy : 'mostRecent.text'

다음 구문을 지원할 수 있는 업그레이드된 버전의 필터를 추가합니다.

ng-repeat="(id, item) in $ctrl.modelData | orderObjectBy:'itemProperty.someOrder':'asc'

---

app.filter('orderObjectBy', function(){

         function byString(o, s) {
            s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
            s = s.replace(/^\./, '');           // strip a leading dot
            var a = s.split('.');
            for (var i = 0, n = a.length; i < n; ++i) {
                var k = a[i];
                if (k in o) {
                    o = o[k];
                } else {
                    return;
                }
            }
            return o;
        }

        return function(input, attribute, direction) {
            if (!angular.isObject(input)) return input;

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

            array.sort(function(a, b){
                a = parseInt(byString(a, attribute));
                b = parseInt(byString(b, attribute));
                return direction == 'asc' ? a - b : b - a;
            });
            return array;
        }
    })

이 스레드에서 Armin과 Jason에게, 그리고 이 스레드에서 Alnitak에게 답변해 주셔서 감사합니다.

+ 유형 및 Armin + 키예: Armin)에 대한 .$resolve

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

    var array = [];
    for(var objectKey in input) {
      if (typeof(input[objectKey])  === "object" && objectKey.charAt(0) !== "$")
        array.push(input[objectKey]);
    }

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

    return array;
 }
})

다음은 객체 내에서 키를 기준으로 또는 키를 기준으로 객체를 정렬할 수 있도록 합니다.

템플릿에서는 다음과 같은 작업을 수행할 수 있습니다.

    <li ng-repeat="(k,i) in objectList | orderObjectsBy: 'someKey'">

또는 다음과 같은 경우도 있습니다.

    <li ng-repeat="(k,i) in objectList | orderObjectsBy: 'someObj.someKey'">

필터:

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

    // Filter out angular objects.
    var array = [];
    for(var objectKey in input) {
      if (typeof(input[objectKey])  === "object" && objectKey.charAt(0) !== "$")
        array.push(input[objectKey]);
    }

    var attributeChain = attribute.split(".");

    array.sort(function(a, b){

      for (var i=0; i < attributeChain.length; i++) {
        a = (typeof(a) === "object") && a.hasOwnProperty( attributeChain[i]) ? a[attributeChain[i]] : 0;
        b = (typeof(b) === "object") && b.hasOwnProperty( attributeChain[i]) ? b[attributeChain[i]] : 0;
      }

      return parseInt(a) - parseInt(b);
    });

    return array;
 }
})

언급URL : https://stackoverflow.com/questions/14478106/angularjs-sorting-by-property