Comment vérifier si une case à cocher est cochée en angle

Si vous ne souhaitez pas utiliser un watcher, vous pouvez faire quelque chose comme ceci:

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

si vous n'avez qu'une case à cocher, vous pouvez le faire facilement avec juste ng-model:

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

et initialiser $scope.coché dans votre Controller (par défaut=false). doc officiel décourage l'utilisation de ng-init dans ce cas.

essayez de penser en termes de modèle et ce qui arrive à ce modèle lorsqu'une case est cochée.

en supposant que chaque case à cocher est liée à un champ sur le modèle avec ng-model alors la propriété sur le modèle est changée chaque fois qu'une case à cocher est cliqué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 doit être disponible que dans certaines circonstances. la directive sur le bouton:

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

Maintenant, la le bouton Suivant ne doit être disponible que lorsque fooSelected est true ou baaSelected est true et nous devons surveiller tout changement dans 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 qu'il n'y a que quelques cases à cocher qui affectent la disponibilité du prochain bouton mais il pourrait être facilement changé pour fonctionner avec un plus grand nombre de cases à cocher et utiliser $watchCollection pour vérifier les changements.

ceci est re-post pour insérer le code aussi. Cet exemple inclus: - Une liste d'objets - Chaque objet as de la liste des enfants. Ex:

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 l'ajouter à une liste d'objets

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

Alors, je vais faire comment pour show case avec plusieurs groupe:

$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

j'ai un échantillon de données multiples avec leurs sous-nœud 3 Liste , chaque liste a 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
    }],
};

Ajouter au Tableau :

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

Afficher 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