web-dev-qa-db-fra.com

Comment vérifier si une case à cocher est cochée dans Angular

Existe-t-il une fonction ou ng -quelque chose pour vérifier si les cases à cocher affichées sont cochées?

J'ai les valeurs à travers le ng-click = "function ()" et passe les valeurs à travers. Je peux aller à pied et vérifier mon tableau si une valeur est à l'intérieur.

Je veux activer/désactiver le bouton "Suivant" si une case à cocher est vérifié.

Quel est le moyen le plus simple?

angularjscheckbox
30
Bastian Gruber

Vous pouvez faire quelque chose comme: 

function ChckbxsCtrl($scope, $filter) {
    $scope.chkbxs = [{
        label: "Led Zeppelin",
        val: false
    }, {
        label: "Electric Light Orchestra",
        val: false
    }, {
        label: "Mark Almond",
        val: false
    }];

    $scope.$watch("chkbxs", function(n, o) {
        var trues = $filter("filter")(n, {
            val: true
        });
        $scope.flag = trues.length;
    }, true);
}

Et un modèle:

<div ng-controller="ChckbxsCtrl">
    <div ng-repeat="chk in chkbxs">
        <input type="checkbox" ng-model="chk.val" />
        <label>{{chk.label}}</label>
    </div>
    <div ng-show="flag">I'm ON when band choosed</div>
</div>

Travailler: http://jsfiddle.net/cherniv/JBwmA/

UPDATE: Sinon, vous pouvez utiliser une méthode légèrement différente, sans utiliser la méthode $watch() de $scope, comme:

$scope.bandChoosed = function() {
    var trues = $filter("filter")($scope.chkbxs, {
        val: true
    });
    return trues.length;
}

Et dans un modèle faire:

<div ng-show="bandChoosed()">I'm ON when band choosed</div>

Fiddle: http://jsfiddle.net/uzs4sgnp/

24
Cherniv

Si vous ne voulez pas utiliser un observateur, vous pouvez faire quelque chose comme ceci:

<input type='checkbox' ng-init='checkStatus=false' ng-model='checkStatus' ng-click='doIfChecked(checkStatus)'>
25
TOBlender

Si vous n'avez qu'une seule case à cocher, vous pouvez le faire facilement avec seulement ng-model:

<input type="checkbox" ng-model="checked"/>
<button ng-disabled="!checked"> Next </button>

Et initialisez $ scope.checked dans votre contrôleur (default = false). Le document officiel décourage l'utilisation de ng-init dans ce cas.

24
antoine

Essayez de penser en termes de modèle et de ce qu'il advient de ce modèle quand une case à cocher est cochée.

En supposant que chaque case à cocher soit liée à un champ du modèle avec ng-model, la propriété du modèle est modifiée chaque fois qu'une case à cocher est cochée:

<input type='checkbox' ng-model='fooSelected' />
<input type='checkbox' ng-model='baaSelected' />

et dans le contrôleur:

$scope.fooSelected = false;
$scope.baaSelected = false;

Le bouton suivant ne devrait être disponible que dans certaines circonstances; ajoutez donc la directive ng-disabled Au bouton:

<button type='button' ng-disabled='nextButtonDisabled'></button>

Maintenant, le bouton suivant ne devrait être disponible que lorsque fooSelected est défini sur true ou baaSelected est défini sur true et que nous devons surveiller les modifications apportées à ces champs pour nous assurer que le bouton suivant est disponible ou non:

$scope.$watch('[fooSelected,baaSelected]', function(){
    $scope.nextButtonDisabled = !$scope.fooSelected && !scope.baaSelected;
}, true );

Ce qui précède suppose que seules quelques cases à cocher ont une incidence sur la disponibilité du bouton suivant, mais il pourrait être facilement modifié pour fonctionner avec un plus grand nombre de cases à cocher et utiliser $ watchCollection pour vérifier les modifications.

8
Gruff Bunny

Ceci est une nouvelle publication pour l'insertion de code également . Cet exemple inclut: - Une liste d'objets - Chaque objet a une liste d'enfants . 

var list1 = {
    name: "Role A",
    name_selected: false,
    subs: [{
      sub: "Read",
      id: 1,
      selected: false
    }, {
      sub: "Write",
      id: 2,
      selected: false
    }, {
      sub: "Update",
      id: 3,
      selected: false
    }],
  };

Je vais 3 liste comme ci-dessus et je vais ajouter à une liste d'un objet

newArr.Push(list1);
  newArr.Push(list2);
  newArr.Push(list3);

Ensuite, je ferai comment afficher une case à cocher avec plusieurs groupes:

$scope.toggleAll = function(item) {
    var toogleStatus = !item.name_selected;
    console.log(toogleStatus);
    angular.forEach(item, function() {
      angular.forEach(item.subs, function(sub) {
        sub.selected = toogleStatus;
      });
    });
  };

  $scope.optionToggled = function(item, subs) {
    item.name_selected = subs.every(function(itm) {
      return itm.selected;
    })
    $scope.txtRet = item.name_selected;
  }

HTML:

<li ng-repeat="item in itemDisplayed" class="ng-scope has-pretty-child">
      <div>
        <ul>
          <input type="checkbox" class="checkall" ng-model="item.name_selected" ng-click="toggleAll(item)"><span>{{item.name}}</span>
          <div>
            <li ng-repeat="sub in item.subs" class="ng-scope has-pretty-child">
              <input type="checkbox" kv-pretty-check="" ng-model="sub.selected" ng-change="optionToggled(item,item.subs)"><span>{{sub.sub}}</span>
            </li>
          </div>
        </ul>
      </div>
      <span>{{txtRet}}</span>
    </li>

Violon: exemple

1
Sinh Nguyễn Đức

J'ai un exemple pour plusieurs données avec leur liste de sous-nœuds 3, chaque liste ayant un attribut et un attribut enfant:

var list1 = {
    name: "Role A",
    name_selected: false,
    subs: [{
        sub: "Read",
        id: 1,
        selected: false
    }, {
        sub: "Write",
        id: 2,
        selected: false
    }, {
        sub: "Update",
        id: 3,
        selected: false
    }],
};
var list2 = {
    name: "Role B",
    name_selected: false,
    subs: [{
        sub: "Read",
        id: 1,
        selected: false
    }, {
        sub: "Write",
        id: 2,
        selected: false
    }],
};
var list3 = {
    name: "Role B",
    name_selected: false,
    subs: [{
        sub: "Read",
        id: 1,
        selected: false
    }, {
        sub: "Update",
        id: 3,
        selected: false
    }],
};

Ajoutez-les au tableau:

newArr.Push(list1);
newArr.Push(list2);
newArr.Push(list3);
$scope.itemDisplayed = newArr;

Montrez-les en HTML:

<li ng-repeat="item in itemDisplayed" class="ng-scope has-pretty-child">
    <div>
        <ul>
            <input type="checkbox" class="checkall" ng-model="item.name_selected" ng-click="toggleAll(item)" />
            <span>{{item.name}}</span>
            <div>
                <li ng-repeat="sub in item.subs" class="ng-scope has-pretty-child">
                    <input type="checkbox" kv-pretty-check="" ng-model="sub.selected" ng-change="optionToggled(item,item.subs)"><span>{{sub.sub}}</span>
                </li>
            </div>
        </ul>
    </div>
</li>

Et voici la solution pour les vérifier:

$scope.toggleAll = function(item) {
    var toogleStatus = !item.name_selected;
    console.log(toogleStatus);
    angular.forEach(item, function() {
        angular.forEach(item.subs, function(sub) {
            sub.selected = toogleStatus;
        });
    });
};

$scope.optionToggled = function(item, subs) {
    item.name_selected = subs.every(function(itm) {
        return itm.selected;
    })
}

jsfiddle démo 

0
Sinh Nguyễn Đức