javascript - 动态Angular表未排序

我在排序动态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>

搜索/过滤器在两个小提琴中均有效。

我希望我能忽略一些简单的事情，如果有人可以看看并提供一些指导，我将不胜感激！

最佳答案

您无需在{{column}}指令中使用插值括号ngClick。它应该是：

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/

关于javascript - 动态Angular表未排序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32640743/