動態Angular表未排序

Question

我在對動態Angular表進行排序時遇到了一些困難。

如果我對表頭進行了硬編碼，那么它將起作用。 小提琴： https : //jsfiddle.net/xgL15jnf/

<thead>
    <tr>
        <td>
            <a href="#" ng-click="sortType =  'id';    sortReverse = !sortReverse">id
                <span   ng-show="sortType  == 'id' && !sortReverse" class="glyphicon glyphicon-arrow-down"></span>
                <span   ng-show="sortType  == 'id' &&  sortReverse" class="glyphicon glyphicon-arrow-up"></span>
            </a>
        </td>
        <td>
            <a href="#" ng-click="sortType =  'name';    sortReverse = !sortReverse">name
                <span   ng-show="sortType  == 'name' && !sortReverse" class="glyphicon glyphicon-arrow-down"></span>
                <span   ng-show="sortType  == 'name' &&  sortReverse" class="glyphicon glyphicon-arrow-up"></span>
            </a>
        </td>
        <td>
            <a href="#" ng-click="sortType =  'cost';    sortReverse = !sortReverse">cost
                <span   ng-show="sortType  == 'cost' && !sortReverse" class="glyphicon glyphicon-arrow-down"></span>
                <span   ng-show="sortType  == 'cost' &&  sortReverse" class="glyphicon glyphicon-arrow-up"></span>
            </a>
        </td>
    </tr>
</thead>

但是，如果我動態構建標題，則不會。 小提琴： https ： //jsfiddle.net/m31d00sz/

<thead>
    <tr>
        <td ng-repeat="column in cols">
            <a href="#" ng-click="sortType = '{{column}}';    sortReverse = !sortReverse">{{column}}
                <span ng-show="sortType   == '{{column}}' && !sortReverse" class="glyphicon glyphicon-arrow-down"></span>
                <span ng-show="sortType   == '{{column}}' &&  sortReverse" class="glyphicon glyphicon-arrow-up"></span>
            </a>
        </td>
    </tr>
</thead>

搜索/過濾器在兩個小提琴中均有效。

我希望我能忽略一些簡單的事情，如果有人可以看看並提供一些指導，我將不勝感激！

Answer 1

您無需在ngClick指令中使用插值括號{{column}} 。 它應該是：

ng-click="sortType = column; sortReverse = !sortReverse"

還有另一個問題。 由於ngRepeat指令在您單擊時每次迭代都會創建新的子作用域，因此您實際上修改了本地作用域的sortReverse和sortType屬性。 最簡單的解決方法是利用原型繼承，在這種情況下，ngClick將使用原型鏈解析的上層范圍的屬性。

為此在控制器中定義

$scope.sort = {
    type: 'id',
    reverse: false
};

並在模板中：

<td ng-repeat="column in cols"> 
    <a href="#" ng-click="sort.type = column; sort.reverse = !sort.reverse">
        {{column}}
        <span ng-show="sort.type == column && !sort.reverse" class="glyphicon glyphicon-arrow-down"></span>
        <span ng-show="sort.type == column && sort.reverse" class="glyphicon glyphicon-arrow-up"></span>
    </a>

</td>

和

<tr ng-repeat="row in rows | orderBy:sort.type:sort.reverse | filter:searchData">
    <td ng-repeat="column in cols">{{row[column]}}</td>
</tr>

演示： https : //jsfiddle.net/m31d00sz/1/