En cliquant sur une case à cocher avec ng-cliquez sur ne pas mettre à jour le modèle

Cliquant sur une case à cocher et de l'appel de ng-click: le modèle n'est pas mis à jour avant ng-cliquez sur coups de pied dans la case de valeur est à tort présenté dans l'INTERFACE utilisateur:

Cela fonctionne dans AngularJS 1.0.7 et semble cassé dans Angualar 1.2-RCx.

<div ng-app="myApp" ng-controller="Ctrl">
<li  ng-repeat="todo in todos">
  <input type='checkbox' ng-click='onCompleteTodo(todo)' ng-model="todo.done">
    {{todo.text}}
</li> 
<hr>
task: {{todoText}}
<hr><h2>Wrong value</h2>
     done: {{doneAfterClick}}

et du contrôleur:

angular.module('myApp', [])
  .controller('Ctrl', ['$scope', function($scope) {
    $scope.todos=[
        {'text': "get milk",
         'done': true
         },
        {'text': "get milk2",
         'done': false
         }
        ];


   $scope.onCompleteTodo = function(todo) {
    console.log("onCompleteTodo -done: " + todo.done + " : " + todo.text);
    $scope.doneAfterClick=todo.done;
    $scope.todoText = todo.text;

   };
}]);

Cassé Violon w/Angulaire 1.2 RCx
- http://jsfiddle.net/supercobra/ekD3r/

De travail fidddle w/Angulaire 1.0.0
- http://jsfiddle.net/supercobra/8FQNw/

Ce n'est pas de travail?
Également cassé pour moi, maintenant que j'ai mis à jour Angulaire à 1,2+
Brisé dans 1.2.7!
Également cassé en v1.2.24.

InformationsquelleAutor supercobra | 2013-10-21

angularjs checkbox

159

Comment sur la modification de
```
<input type='checkbox' ng-click='onCompleteTodo(todo)' ng-model="todo.done">
```
à
```
<input type='checkbox' ng-change='onCompleteTodo(todo)' ng-model="todo.done">
```
De docs:

Évaluer une expression lorsque l'utilisateur change de l'entrée. L'expression n'est pas évaluée lors de la modification de la valeur est à venir à partir du modèle.

Remarque, cette directive exige ngModel d'être présent.
- cela semble également être rompu dans la version 1.2.7
- La sainte ampoule, Batman! Je pensais faire quelque chose de complètement faux, mais il s'est avéré être aussi simple que cela.
- Très utile réponse! +1 Angulaire doc -1
- que faire si vous avez besoin les données d'événement à preventDefault?
InformationsquelleAutor kakoni
11

Comme indiqué dans https://github.com/angular/angular.js/issues/4765, le passage de ng-cliquez pour ng-changement semble résoudre ce problème (je suis en utilisant Angulaire 1.2.14)
- La plus simple et la plus facile à corriger. +1 pour Griffindor 🙂
InformationsquelleAutor Peter Hollingsworth
9

L'ordre dans lequel ng-click et ng-model sera exécutée est ambigu (puisque ni de définir explicitement leur priority). Le plus stable de la solution à ce problème serait d'éviter de les utiliser sur le même élément.

Aussi, vous ne voulez probablement pas le comportement que le montrent les exemples, vous voulez le checkbox de répondre aux clics sur le le texte de l'étiquette, non seulement la case à cocher. Par conséquent, la solution la plus propre serait pour envelopper le input (avec ng-model) à l'intérieur d'un label (avec ng-click):
```
<label ng-click="onCompleteTodo(todo)">
  <input type='checkbox' ng-model="todo.done">
  {{todo.text}}
</label>
```
De travail exemple: http://jsfiddle.net/b3NLH/1/
- Merci beaucoup! C'est la seule solution qui a fonctionné pour moi!
- Cette solution est toujours la meilleure!
InformationsquelleAutor musically_ut

Pourquoi ne pas vous utiliser

$watch('todo',function(.....

Ou une autre solution serait de définir la todo.done à l'intérieur de la ng-cliquez sur rappel et de n'utiliser ng-cliquez sur

<div ng-app="myApp" ng-controller="Ctrl">
<li  ng-repeat="todo in todos">
<input type='checkbox' ng-click='onCompleteTodo(todo)'>
    {{todo.text}} {{todo.done}}

$scope.onCompleteTodo = function(todo) {
        todo.done = !todo.done; //toggle value
        console.log("onCompleteTodo -done: " + todo.done + " : " + todo.text);
        $scope.current = todo;
}

Voir @kakoni réponse, j'ai utilisé ng-changement au lieu de ng-click et le moment fonctionne très bien. Cela vous permet de garder la liaison bidirectionnelle et est beaucoup plus propre approche.

InformationsquelleAutor GuillaumeA

6

Remplacement de ng-modèle avec ng-vérifié qui fonctionne pour moi.
- Ce que je voulais. Merci!
- Juste travaillé pour moi de toutes les solutions disponibles ici.
InformationsquelleAutor zzjove

Il est une sorte de hack mais en l'enveloppant dans un délai semble accomplir ce que vous êtes à la recherche pour:

angular.module('myApp', [])
    .controller('Ctrl', ['$scope', '$timeout', function ($scope, $timeout) {
    $scope.todos = [{
        'text': "get milk",
        'done': true
    }, {
        'text': "get milk2",
            'done': false
    }];

    $scope.onCompleteTodo = function (todo) {
        $timeout(function(){
            console.log("onCompleteTodo -done: " + todo.done + " : " + todo.text);
            $scope.doneAfterClick = todo.done;
            $scope.todoText = todo.text;
        });
    };
}]);

InformationsquelleAutor Brian Lewis

De la commande entre ng-model et ng-click semble être différent et c'est quelque chose que vous ne devriez probablement pas compter sur. Au lieu de cela, vous pourriez faire quelque chose comme ceci:

<div ng-app="myApp" ng-controller="Ctrl">
<li  ng-repeat="todo in todos">
<input type='checkbox' ng-model="todo.done" ng-click='onCompleteTodo(todo)'>
    {{todo.text}} {{todo.done}}
</li> 
    <hr>
        task: {{current.text}}
        <hr>
            <h2>Wrong value</h2>
         done: {{current.done}}
</div>

Et votre script:

angular.module('myApp', [])
    .controller('Ctrl', ['$scope', function($scope) {

        $scope.todos=[
            {'text': "get milk",
             'done': true
             },
            {'text': "get milk2",
             'done': false
             }
            ];

        $scope.current = $scope.todos[0];


       $scope.onCompleteTodo = function(todo) {
            console.log("onCompleteTodo -done: " + todo.done + " : " + todo.text);
    //$scope.doneAfterClick=todo.done;
    //$scope.todoText = todo.text;
       $scope.current = todo;

   };
}]);

Ce qui est différent ici est à chaque fois que vous cliquez sur une case, il définit cette zone comme ce qui est "actuel" et ensuite afficher ces valeurs dans la vue. http://jsfiddle.net/QeR7y/

la mère de l'indentation...

InformationsquelleAutor Manny D

0

Habituellement, cela est dû à une autre directive en entre vos ng-controller
et de votre contribution qui est la création d'un nouveau champ d'application. Lorsque l'sélectionnez écrit
c'valeur, il écrira jusqu'à la plus récente de la portée, de sorte qu'il
écrire à cette portée, plutôt que le parent qui est plus loin
loin.

La meilleure pratique est de ne jamais se lier directement à une variable dans la portée
dans un ng-model, c'est également connue comme toujours, y compris un "point" dans
votre ngmodel. Pour mieux expliquer cela, regardez cette vidéo
de Jean:

http://www.youtube.com/watch?v=DTx23w4z6Kc

Solution de: https://groups.google.com/forum/#!topic/angulaire/7Nd_me5YrHU
- Ce serait super si vous fournissez un saut marqueur #t=5m08s dans votre lien YouTube de sorte qu'il n'est pas nécessaire de regarder la vidéo complète. Voir mattcutts.com/blog/link-to-youtube-minute-second
InformationsquelleAutor fergusrg
0

Je viens de remplacer ng-model avec ng-checked et il a travaillé pour moi.

Ce problème a été lorsque j'ai mis à jour mon angulaire de la version de 1.2.28 à 1.4.9

Également vérifier si votre ng-change est à l'origine de tout problème ici. J'ai dû enlever mon ng-change comme-bien à le faire fonctionner.

InformationsquelleAutor thatzprem

-1

.task{ng:{repeat:'task in model.tasks'}}
  %input{type:'checkbox',ng:{model:'$parent.model.tasks[$index].enabled'}}

InformationsquelleAutor Andrew WC Brown

Vous devez vous connecter pour publier un commentaire.