Ich implementiere Sortierung für eine ng-Wiederholung und die Sortierung selbst funktioniert gut.AngularJS ng-show-Symbole funktionieren nicht richtig nach dem Sortieren
Wenn jedoch die Carets für jede Schaltfläche ein- und ausgeblendet werden, wird nur der Caret der ersten Schaltfläche unabhängig von der Schaltfläche, auf die ich klicke, von oben nach unten umgeschaltet.
-Code unten: 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>
Controller:
$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;
};
habe dieses Bild mit den ersten 2 Tasten - es gibt mir das gleiche Ergebnis (dh unabhängig davon, ob dem Knopf klicken I, nur die erste Schaltfläche ändert), außer es jetzt immer ein nach unten Pfeil auf den anderen Tasten. – MC123
Und danke für den Vorschlag, zu einer Funktion zu wechseln :) – MC123