排序后AngularJS ng-show图标无法正常工作

Question

我正在为 ng-repeat 实现排序，排序本身工作正常。

但是，在显示/隐藏每个按钮上的插入符号时，无论我单击哪个按钮，只有第一个按钮的插入符号会从上切换到下。

代码如下： HTML：

    <button ng-click="sortQuestions('createdAt')" class="sort-button chip grey darken-2 white-text">Newest
        <span ng-show="showCaretDown('createdAt') === true"><i class="fa fa-caret-down"></i></span>
        <span ng-show="showCaretUp('createdAt') === true"><i class="fa fa-caret-up"></i></span>
    </button>
    <button ng-click="sortQuestions('updatedAt')" class="sort-button chip grey darken-2 white-text">Last Updated
        <span ng-show="showCaretDown('updatedAt') === true"><i class="fa fa-caret-down"></i></span>
        <span ng-show="showCaretUp('updatedAt') === true"><i class="fa fa-caret-up"></i></span>
    </button>
    <button ng-click="sortQuestions('numberOfAnswers')" class="sort-button chip grey darken-2 white-text">Answers
        <span ng-show="showCaretDown('numberOfAnswers') === true"><i class="fa fa-caret-down"></i></span>
        <span ng-show="showCaretUp('numberOfAnswers') === true"><i class="fa fa-caret-up"></i></span>
    </button>
    <button ng-disabled="true" ng-click="sortQuestions('votes')" class="sort-button chip grey darken-2 white-text">Votess
        <span ng-show="showCaretDown('votes')"><i class="fa fa-caret-down"></i></span>
        <span ng-show="showCaretUp('votes')"><i class="fa fa-caret-up"></i></span>
    </button>

    <div ng-repeat="question in questions | orderBy:sort.propertyName:sort.ascending" class="card-panel">
    ....
    </div>

控制器：

$scope.questions = [];
$scope.sortAscending = true;
$scope.sort = {
    propertyName: 'createdAt',
    ascending: true
};


$scope.questions = questionService.getQuestions().then(function success(response) {
    logger.info("Returned questions data: ", response.data);
    $scope.questions = response.data._embedded.questions;
    logger.info("$scope.questions: ", $scope.questions);
    logger.info("Is $scope,questions an array? ", angular.isArray($scope.questions));
}, function error(response) {
    logger.error("Error getting questions: ", response.data);
    $scope.error = response.data;
});

$scope.sortQuestions = function(sortPropertyName) {
    logger.info("Sorting by ", sortPropertyName);
    $scope.sort.properyName = sortPropertyName;
    $scope.sort.ascending = !$scope.sort.ascending;
};

$scope.showCaretDown = function(sortPropertyName) {
    return $scope.sort.propertyName === sortPropertyName && !$scope.sort.ascending;
};

$scope.showCaretUp = function(sortPropertyName) {
    return $scope.sort.propertyName === sortPropertyName && $scope.sort.ascending;
};

Answer 1

你不需要两个函数。您可以通过使用 ng-show 和 ng-hide 指令的单个函数来做到这一点。像下面这样。但是我没有检查showAndHidCaretIcon()函数何时触发。

<button ng-click="sortQuestions('createdAt')" class="sort-button chip grey darken-2 white-text">Newest
        <span ng-show="showAndHidCaretIcon('createdAt') === true"><i class="fa fa-caret-down"></i></span>
        <span ng-hide="showAndHidCaretIcon('createdAt') === true"><i class="fa fa-caret-up"></i></span>
    </button>

和

$scope.showAndHidCaretIcon = function(sortPropertyName) {
    return ($scope.sort.propertyName === sortPropertyName && $scope.sort.ascending);
};