並べ替え後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

あなたは2つの機能を必要としません。 ng-showとng-hideディレクティブを使用して1つの関数を使用することでそれを行うことができます。以下のようにしてください。しかし、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); 
};