J'ai une table dans AngularJS avec plusieurs colonnes qui peuvent chacune être triées par ordre croissant et décroissant. Je souhaite qu'une ligne soit sélectionnée chaque fois qu'un utilisateur clique dessus. Je fais cela en obtenant l'index sélectionné de la table. Cependant, une fois que j'ai recours à l'une des colonnes, la ligne sélectionnée reste en surbrillance. Ce que je veux faire, c'est garder l'élément sélectionné précédemment en surbrillance ... où que se trouve son nouvel index après le recours. Voici un extrait de code:

Mon corps de table:

<tbody>
    <tr
      ng-class="{'selected':$index == list.selectedRow}"
      ng-repeat="item in list.itemList | order:list.orderBy:list.orderAsc">
      <td ng-click="list.select(item);list.setClickedRow($index)">{{ item.number }}
      </td>
      <td ng-click="list.select(item);list.setClickedRow($index)">{{ item.name }}
      </td>
    </tr>
</tbody>

La méthode pour définir la ligne sélectionnée:

function setClickedRow(index) {
    vm.selectedRow = index;
}
0
YourReflection 17 janv. 2017 à 15:09

2 réponses

Meilleure réponse

D'après la réponse Slonski , je vous suggère de parcourir tous les éléments à définir {{X0} } lorsque vous modifiez votre sélection:

function setClickedRow(item) {
  for(var i = 0; i < $scope.list.itemList.length; i++) {
    if(item == $scope.list.itemList[i]) item.selected = true;
    else $scope.list.itemList[i].selected = false;
  }
  item.selected = true;
}

Mise à jour: solution sans boucle

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.setMaster = function(section) {
    $scope.selected = section;
  }

  $scope.isSelected = function(section) {
    return $scope.selected === section;
  }
}]);
.active {
    background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
    <table>
      <tr ng-repeat="i in ['One', 'Two', 'Three']" ng-class="{active : isSelected(i)}">
        <td ng-click="setMaster(i)">{{i}}</td>
      </tr>
    </table>
    <hr> {{selected}}
</div>
1
Community 23 mai 2017 à 10:29

Vous pouvez ajouter selected à votre item, et le définir sur vrai au clic (ou le définir sur !item.selected si vous souhaitez basculer la sélection au clic)

<tbody>
<tr
  ng-class="{'selected':item.selected}"
  ng-repeat="item in list.itemList | order:list.orderBy:list.orderAsc">
  <td ng-click="list.select(item);list.setClickedRow(item)">{{ item.number }}
  </td>
  <td ng-click="list.select(item);list.setClickedRow(item)">{{ item.name }}
  </td>
</tr>
</tbody>



function setClickedRow(item) {
  item.selected = true;
}
1
Slonski 17 janv. 2017 à 12:21