AngularJS: select unique entre plusieurs case
Je suis en train de forcer une simple sélection sur les cases à cocher, semblable à un html ", sélectionnez"
J'ai un code html simple tableau:
<tr ng-repeat="subscription in entities">
<td>
<input type="checkbox" ng-checked="isChecked(subscription)" ng-click="toggleSelection(subscription)"/>
</td>
</tr>
Puis j'ai quelques simples fonctions de la manette de ces directives ci-dessus:
$scope.isChecked = function(entity) {
return $scope.checkedEntity === entity;
};
$scope.toggleSelection = function(entity) {
entity.checked = !entity.checked;
if (entity.checked) {
$scope.checkedEntity = entity;
} else {
$scope.checkedEntity = null;
}
};
Malheureusement, il ne fonctionne pas, et je pense que je viens de découvrir pourquoi.... la ng-click a 0 priorité, vs 100 ng-vérifié.
Est-il une solution élégante à ce problème?
pouvez-vous partager votre
Je suis désolé de ne pas obtenir ce que vous voulez dire?
pourquoi ne pas simplement utiliser type="radio"?
$scope
objetsJe suis désolé de ne pas obtenir ce que vous voulez dire?
pourquoi ne pas simplement utiliser type="radio"?
OriginalL'auteur Brian | 2014-04-24
Vous devez vous connecter pour publier un commentaire.
Lier
ng-model
àsubscription.checked
, et ontng-click
décochez tous les abonnements à l'exception de celui cliqué. Puisque ce sont des cases à cocher, celui cliqué bascule lui-même.Vous pouvez utiliser un simple
for
boucle, mais angulaire deforEach
nous permet de faire un alias de chaque élément commesubscription
et d'améliorer la lisibilité:Ici est un travail de démonstration: http://plnkr.co/edit/XD7r6PoTWpI4cBjdIZtv?p=preview
Cette syntaxe est plus jolie 😛
entities.map((x, i) => x.checked = position === i);
Une grande aide, Merci, beaucoup!
OriginalL'auteur j.wittwer
J'ai utilisé le code ci-dessous pour obtenir la même fonctionnalité. Astuce consiste à utiliser ng-cliquez sur qui peut remédier à cela très bien. case-1 & case-2 sont boolean dans la nature.
OriginalL'auteur Danish
Sur le dessus de ma tête, je te suggère de l'une des trois options pour vous.
J'irais avec l'option 3-je suis toujours un fan de profiter de l'entrée d'origine des éléments.
Ce que vous pouvez faire est de mettre en place la directive telle qu'elle entraîne sur le changement de modèle et de reconfigurer les cases à cocher. "two-way", la liaison est certainement une chose dans Angulaire directives, et il peut vous aider ici.
Aussi, j'ai pensé que tu serais allé avec des boutons radio si vous pourriez avoir. 😉
OriginalL'auteur Vishal Kotcherlakota