AngularJS özelliğe göre sıralama

Yapmaya çalıştığım şey, bazı verileri özelliğe göre sıralamak. İşte çalışması gerektiğini düşündüğüm ama çalışmayan bir örnek.

HTML kısmı:

<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 kısmı:

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

}]);

Ve sonuç:

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

... IMHO'ya göre bu şekilde görünmelidir:

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

Bir şey mi kaçırdım (işte denemek için hazır [JSFiddle][1])?

PrimosK
Edited question 2013ööp46öö11 Ocak 2013 в 11:46
Programlama
javascript angularjs
2013ööp2öö11 Ocak 2013 в 11:02
73 görünümler
Çözüm

AngularJS' orderBy filtresi sadece dizileri destekler - nesneleri desteklemez. Bu nedenle, sıralamayı sizin için yapan kendi küçük filtrenizi yazmanız gerekir.

Veya işlediğiniz verilerin biçimini değiştirin (bu konuda etkiniz varsa). Nesneleri içeren bir dizi, yerel orderBy filtresi tarafından sıralanabilir.

İşte AngularJS için benim orderObjectBy filtrem:

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;
 }
});

Sizin görüşünüze göre kullanım:

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

Bu örnekte nesnenin bir position niteliğine ihtiyacı vardır, ancak nesnelerde (bir tamsayı içeren) herhangi bir niteliği kullanma esnekliğine sahipsiniz, sadece görünümdeki tanımla.

Örnek JSON:

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

İşte size kullanımı gösteren bir keman: http://jsfiddle.net/4tkj8/1/

Armin
Edited answer 2015ösp17ös16 Mart 2015 в 4:17
Yorumlar (7)

Angular-JS kodunda görebileceğiniz gibi ( https://github.com/angular/angular.js/blob/master/src/ng/filter/orderBy.js ) ng-repeat nesnelerle çalışmaz. İşte sortFunction ile bir hack.

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;
        }
    }
}]);
SunnyShah
Edited answer 2013ösp16ös13 Ocak 2013 в 1:16
Yorumlar (1)

http://docs.angularjs.org/api/ng.filter:orderBy 'a göre, orderBy bir diziyi sıralar. Sizin durumunuzda bir nesne geçiyorsunuz, bu nedenle kendi sıralama işlevinizi uygulamanız gerekecek.

veya bir dizi iletin -

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

http://jsfiddle.net/qaK56/ adresine bir göz atın

Gal Ben-Haim
Edited answer 2013ösp22ös12 Ocak 2013 в 12:22
Yorumlar (2)