web-dev-qa-db-fra.com

AngularJS ajoute la valeur des cases à cocher à un tableau

J'ai ce code:

<tr ng-repeat="doc in providers">      
  <td><input type="checkbox" ng-true-value="{{doc.provider.Id}}" ng-false-value="" ng-model="ids"></td> 
</tr>

{{ids}}

je veux obtenir les valeurs des cases à cocher sur un tableau

javascripthtmlangularjsangularjs-scopeangularjs-ng-repeat
18
Rodrigo Zurek

ng-true-value accepte uniquement les chaînes, vous devrez donc utiliser une solution de contournement. Cela a été un demande de fonctionnalité pendant un certain temps. En attendant, vous pouvez le faire:

Créez un objet ids dans le contrôleur comme:

$scope.ids = {};

et changez ng-model pour référencer une clé dans cet objet. Vous pouvez utiliser la valeur par défaut true/false valeurs des cases à cocher:

<td><input type="checkbox" ng-model="ids[doc.provider.Id]"></td>

Ensuite, vous pouvez parcourir les clés en boucle dans ids en vérifiant true.

Voici un violon

25
Dan

J'ai trouvé que cette directive fournissait la fonctionnalité que je cherchais. Le principal problème que j'ai rencontré avec les solutions les plus courantes est que j'ai deux tableaux dont j'avais besoin pour stocker des données compatibles avec une liste de sélection multiple. La directive checklistModel fournit cette fonctionnalité très basique et fonctionne avec plusieurs modèles.

7
RevNoah

Je commencerai par dire que je n'aime vraiment pas les options pour le faire en angulaire. Je ne peux même pas dire que c'est mieux que la réponse acceptée, mais cela garde les données dans le modèle.

Balisage:

<tr ng-repeat='(index, doc) in provider'>
    <td><input type='checkbox' ng-true-value='{{doc.provider.Id}}' ng-model='ids[index]' /></td>
</tr>

<span ng-repeat='id in ids'>{{id}} </span>

Maintenant, regardez simplement la valeur du tableau et filtrez-la lorsqu'elle change dans le contrôleur (assurez-vous de passer le paramètre d'égalité d'objet):

$scope.ids = [];

$scope.updateIds = function() {
    $scope.ids = $scope.ids.filter(function(id) {
        return !!id;
    });
};

$scope.$watch('ids', $scope.updateIds, true);

Quand j'ai commencé à répondre à cette question, je pensais que les options les plus idiomatiques seraient d'ajouter une directive ng-change sur l'entrée:

<input type='checkbox' ng-true-value='{{doc.provider.Id}}' ng-model='ids[index]' ng-change='updateIds()'/>

Malheureusement, cela ne fonctionne pas comme prévu. L'interface utilisateur ne se met pas à jour correctement lors de la suppression de valeurs. Je tiens également à souligner que vous pouvez le faire sans la directive répétée:

<input type='checkbox' ng-true-value='1' ng-model='ids.0' />
<input type='checkbox' ng-true-value='2' ng-model='ids.1' />
<input type='checkbox' ng-true-value='3' ng-model='ids.2' />
<input type='checkbox' ng-true-value='4' ng-model='ids.3' />
<input type='checkbox' ng-true-value='5' ng-model='ids.4' />
<input type='checkbox' ng-true-value='6' ng-model='ids.5' />

Dans ce cas, la $ watch est nettement meilleure que l'ajout du ng-change à chaque entrée. Enfin, voici un fonctionnement plunkr . La fonction $ watch finit par s'exécuter deux fois à chaque fois qu'une case est cochée ou décochée, mais c'est vraiment ainsi que cela doit être!

5
threeve