Je suis assez nouveau dans le domaine angulaire, alors peut-être que la réponse est juste devant mon visage, d'autant plus que j'ai vu des questions très similaires, mais aucune n'a fonctionné pour moi. Comme le titre l'indique, j'essaie de changer ng-class en fonction de laquelle des 3 cases d'option est sélectionnée dans un ng-repeat. Certaines choses que j'ai essayées dans l'exemple sont ng-click bien que cela semble se comporter avec un comportement booléen true / false, où je pense que j'ai besoin de plus d'un comportement switch. J'ai également essayé la solution ici bien que cela ne semble pas fonctionner dans un cas conditionnel. Voici ce avec quoi je travaille:

<div class="col-md-4 col-sm-4 col-xs-12 projectType" ng-repeat="type in types">
   <label>
      <span class="typeIcon" ng-class="type.icon"></span>
      <p>{{ type.name }}</p>
      <input type="radio" name="type" ng-value="type" ng-model="$parent.selectedType" />
   </label>
</div>
<div class="col-md-12 col-sm-12 col-xs-12" ng-hide="selectedType.id !== 1">
    <input type="text" ng-hide="selectedType.id !== 1" ng-disabled="selectedType.id !== 1">
</div>
<div class="col-md-12 col-sm-12 col-xs-12" ng-hide="selectedType.id !== 2">
    <input type="text" ng-hide="selectedType.id !== 2" ng-disabled="selectedType.id !== 2">
</div>
<div class="col-md-12 col-sm-12 col-xs-12" ng-hide="selectedType.id !== 3">
    <input type="text" ng-hide="selectedType.id !== 3" ng-disabled="selectedType.id !== 3">
</div>

Le contrôleur applique simplement des fonctionnalités à chaque type, telles qu'un identifiant et un nom.

Ce que j'essaie spécifiquement de faire, c'est de modifier le background-color du libellé parent lorsque radio est sélectionné. J'ai également ajouté quelques divs ci-dessous qui bascule également en fonction de laquelle radio est sélectionné pour montrer une logique existante qui peut être un obstacle ou un atout pour toutes les solutions possibles. Je sais que cela peut être une tâche très simple en angular, donc j'apprécie votre patience et votre aide.

1
Nathan Lykke 27 déc. 2015 à 19:17

2 réponses

Meilleure réponse

Vous pouvez modifier le HTML de cette manière:

<div class="col-md-4 col-sm-4 col-xs-12 projectType" ng-repeat="type in types">
   <label ng-class="{ 'red': $parent.selectedType.value === type.value }">
      <span class="typeIcon" ng-class="type.icon"></span>
      <p>{{ type.name }}</p>
      <input type="radio" name="type" ng-value="type" ng-model="$parent.selectedType" />
   </label>
</div>

Et la partie JS est (pour les tests):

$scope.$parent.selectedType = {};
$scope.types = [ { name: 'a', value: 'A' }, { name: 'b', value: 'B' }, { name: 'c', value: 'C' } ];
2
Mat 27 déc. 2015 à 16:42

Voici comment faire ce dont vous avez besoin:

Lorsqu'une radio est sélectionnée, sa couleur de fond est changée en rouge, pour cela j'ai créé cette classe:

.selectedlabel { background-color: red; }

Et puis l'a appliqué à l'étiquette de l'entrée radio en utilisant ng-class comme ci-dessous

<label ng-repeat="type in types" ng-class="{selectedlabel: $parent.selected == type.id}">
<input type="radio" ng-model="$parent.selected" name="Group" ng-value="type.id"> {{type.name }}
<br>

Pour afficher / masquer les divs avec les radios sélectionnées, j'ai utilisé ng-show

 <div ng-show="selected == 1">

Le violon complet est ici: Fiddle

2
Hisham 27 déc. 2015 à 18:17