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