web-dev-qa-db-fra.com

Comment décocher la case à cocher par programme?

Je souhaite décocher par programme une case à cocher. Je sais comment le faire en javascript mais puisque j'utilise angulaire, je pense que c'est différent.

Voici le lien de jsfiddle: https://jsfiddle.net/TKVH6/499/

C'est la première fois que j'utilise jsfiddle, alors faites-moi savoir si vous ne pouvez pas voir le script et le HTML.

C'est le html

<input type="checkbox" ng-model="v" ng-click="checkAll()" />
<button ng-click="x()">eto</button>

C'est l'angulaire

$scope.x = function () {
    $scope.v.checked=false;
};

Je sais qu'il y a beaucoup de questions comme celle-ci, je les ai déjà essayées mais je ne peux pas les faire fonctionner.

Merci!

angularjscheckboxangular-ngmodel
10
user3714598

Première chose : Vous avez spécifié le contrôleur sur ul et liez l'événement click du bouton à l'extérieur de ul, donc le ng-controller déplacé sur div.

Deuxième chose : Pour le vérifier de manière pragmatique, vous devez définir $scope.Items[i].Selected = true;

$scope.x = function () {
    alert("x");
    $scope.Items[0].Selected=true;
};

Pourquoi nous devons définir la propriété sélectionnée des éléments [i] alors que je ne l'ai pas déclaré?

La raison derrière cela est votre liaison html est quelque chose comme ceci:

<li ng-repeat="item in Items">
    <label>{{item.Name}}
        <input type="checkbox" ng-model="item.Selected" />
    </label>
</li>

Ici, chaque élément est un élément du tableau Items, ce qui signifie que la valeur cochée de votre case est désormais liée à la propriété sélectionnée de cet objet. Même si vous n'avez pas défini cette propriété dans la collection Items angular va la créer et la lier à cette propriété. Vous devez donc définir cette propriété. J'espère que cela vous aidera.

Voici le violon de travail => lien

11
Jenish Rabadiya
<input type="checkbox" ng-checked="v" ng-click="checkAll()" />

Dans votre contrôleur

$scope.v = true; // or false
14
Murali VP