Comment vérifier si tout est bien coché dans Angulaire

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)'>

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

En supposant que chaque case est lié à un champ sur le modèle avec ng-model alors la propriété sur le modèle est modifié à chaque fois qu'une case à cocher est cliqué:

<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 dans certaines circonstances, ajoutez la ng-désactivé
la directive sur le bouton:

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

Maintenant le bouton suivant ne devraient être disponibles lorsque vous fooSelected est vrai ou baaSelected est vrai et nous avons besoin de regarder toute modification de ces champs pour s'assurer que le bouton suivant est disponible ou pas:

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

Ci-dessus suppose qu'il y a seulement quelques cases qui affectent la disponibilité de la prochaine bouton, mais il pourrait être facilement modifié pour fonctionner avec un plus grand nombre de cases à cocher et les utiliser $watchCollection pour vérifier les changements.

J'ai un échantillon de données multiples avec leurs sous-nœud
3 liste , chaque liste a de l'attribut et de l'enfant de l'attribut:

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
    }],
};

Les ajouter à la Matrice :

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

Montrer 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