Question

我正在尝试使用Predicate函数为我的AngularJS应用程序实现排序。这是我的代码

<td>
    <a href="" ng-click="predicate = 'date'; reverse=!reverse">
        Time
        <span ng-show="predicate == 'date'">
            <span ng-show="!reverse">
                <img src="img/ascending.gif">
            </span>
            <span ng-show="reverse">
                <img src="img/descending.gif">
            </span>
        </span>
    </a>
</td>

<td ng-if="SId==2">
    <a href="" ng-click="predicate = 'name'; reverse=!reverse">
        Name
        <span ng-show="predicate == 'name'">
            <span ng-show="!reverse">
                <img src="img/ascending.gif">
            </span>
            <span ng-show="reverse">
                <img src="img/descending.gif">
            </span>
        </span>
    </a>
</td>

<td ng-if="SId==2">
    <a href="" ng-click="predicate = 'rno'; reverse=!reverse">
        RNO
        <span ng-show="predicate == 'rno'">
            <span ng-show="!reverse">
                <img src="img/ascending.gif">
            </span>
            <span ng-show="reverse">
                <img src="img/descending.gif">
            </span>
        </span>
    </a>
</td>

<td ng-if="SId==1">
    <a href="" ng-click="predicate = 'phoneNumber'; reverse=!reverse">
        Phone Number
        <span ng-show="predicate == 'phoneNumber'">
            <span ng-show="!reverse">
                <img src="img/ascending.gif">
            </span>
            <span ng-show="reverse">
                <img src="img/descending.gif">
            </span>
        </span>
    </a>
</td>

我有两个仪表板，它们使用相同的HTML页面。但列名称不同。因此，基于ng-if条件显示列名称（SId = 1是第一个仪表板，而SId = 2是第二个仪表板）。现在，两个仪表板中的列都正确显示。但是当我对列名实现排序时，具有ng-if条件的列不会排序。

Answer 1

ng-if有自己的范围。因此，当您在ng-if中执行predicate = 'rno'时，您在ng-if范围内创建一个predicate属性，而不是修改控制器范围的谓词。

使用函数设置谓词：

$scope.sortBy = function(property) {
    $scope.predicate = property; 
    $scope.reverse = !$scope.reverse;
}

和

<td ng-if="SId==2"><a href="" ng-click="sortBy('name')">

Angularjs断言ng-if不起作用

1 个答案: