2014年12月14日 星期日

Angularjs:custom orderBy and current $index


當使用Angularjs中的repeat功能時,常常會有對datasource進行排序的需求,但如果使用預設的orderBy時,我們在取$index是表面上排序的索引,但真正的datasource並沒有進行排序,因此取到的index並非datasource的真正位置,如果要取得datasource中的正確位置,那麼就得撰寫類似下面代碼:

<div ng-repeat="item in datasource|orderBy:'age'">
    {{item.name}}
    Current Index : {{getCurrentIndex(item)}}
</div>
$scope.getCurrentIndex = function(item){
return datasource.indexOf(item);
}

雖然這樣已經符合大部分情境需求,但如果今天我們是想要設計一個可以讓使用者搭配shift來做連續選取的項目時,那麼以上的解法勢必不能滿足我們的需求,因為假設原始資料為[d,c,a,b],而排序過後就成為[a,b,c,d],再來試想當使用者以shift來連選(b、c、d)時,我們在背後實作的邏輯會是將索引1~3的資料從datasource取出來,此時問題點來了,我們的start是1、end是3,那麼我們在從datasource取1~3將會變成(c、a、b)就與使用者所連選的資料有出入,會造成這種情況是因為Angularjs在實做orderBy時repeat中的datasource是用copy的可以參考這裡的說明Angularjs orderBy,故在這種情況下我們希望呈現給使用的datasource是真正排序過的,因此勢必自訂一個orderBy的filter,如下:

.filter('orderBySource', function () {
            var sortByString = function (a, b, field) {
                return (a[field] > b[field] ? 1 : a[field] < b[field] ? -1 : 0);
            };
            var sortByArray = function (a, b, fields) {
                var i = 0, result = 0;
                while (result === 0 && i < fields.length) {
                    result = sortByString(a, b, fields[i]);
                    i++;
                }
                return result;
            };
            return function (datasource, args, reverse) {
                if (!datasource) return;
                if (angular.isString(args)) {
                    datasource.sort(function (a, b) {
                        return sortByString(a, b, args);
                    });
                } else if (angular.isArray(args)) {
                    datasource.sort(function (a, b) {
                        return sortByArray(a, b, args);
                    });
                } else if (angular.isFunction(args)) {
                    datasource.sort(args);
                }
                if (reverse) datasource.reverse();
                return datasource;
            };
        })

上面的filter就像Angularjs原始的orderBy一樣,可以傳入字串或陣列,甚至是一個call back function來進行排序,而在html端則像原本一樣的使用方式:

  <a href="#" class="list-group-item"
               ng-repeat="item in appCtrl.datasource|orderBySource:appCtrl.sortExpression|filter:appCtrl.search">
                {{item.name}}
                {{item.age}}
                current Index:{{$index}}
            </a>

完整原始碼可參考:http://plnkr.co/edit/web8Oa?p=preview


沒有留言:

張貼留言