Hacer clic en una casilla de verificación con ng-click no actualiza el modelo

Al hacer clic en una casilla de verificación y llamar a ng-click: el modelo no se actualiza antes de que ng-click se active, por lo que el valor de la casilla de verificación se presenta incorrectamente en la interfaz de usuario:

Esto funciona en AngularJS 1.0.7 y parece roto en 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}}

y controlador:

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;

   };
}]);

Violín roto con Angular 1.2 RCx - http://jsfiddle.net/supercobra/ekD3r/

Violín de trabajo con Angular 1.0.0 - http://jsfiddle.net/supercobra/8FQNw/

Que tal cambiar

<input type='checkbox' ng-click='onCompleteTodo(todo)' ng-model="todo.done">

a

<input type='checkbox' ng-change='onCompleteTodo(todo)' ng-model="todo.done">

De los documentos :

Evaluar la expresión dada cuando el usuario cambia la entrada. La expresión no se evalúa cuando el cambio de valor proviene del modelo.

Tenga en cuenta que esta directiva requiere ngModelestar presente.

Como se informa en https://github.com/angular/angular.js/issues/4765 , cambiar de ng-click a ng-change parece solucionar esto (estoy usando Angular 1.2.14)

El orden en el que ng-clicky ng-modelse ejecutará es ambigua (ya que ni establecer explícitamente su priority). La solución más estable para esto sería evitar usarlos en el mismo elemento.

Además, probablemente no desee el comportamiento que muestran los ejemplos; desea checkboxque responda a los clics en el texto completo de la etiqueta , no solo a la casilla de verificación. Por lo tanto, la solución más limpia sería envolver el input(con ng-model) dentro de un label(con ng-click):

<label ng-click="onCompleteTodo(todo)">
  <input type='checkbox' ng-model="todo.done">
  {{todo.text}}
</label>

Ejemplo de trabajo: http://jsfiddle.net/b3NLH/1/

¿Por qué no usas

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

O otra solución sería configurar el todo.doneinterior de la devolución de llamada ng-click y solo usar ng-click

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

y

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

Reemplazar ng-model con ng-comprobado funciona para mí.

Es una especie de truco, pero envolverlo en un tiempo de espera parece lograr lo que está buscando:

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

El orden entre ng-modely ng-clickparece ser diferente y es algo en lo que probablemente no deberías confiar. En su lugar, podría hacer algo como esto:

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

Y tu guión:

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;

   };
}]);

Lo que es diferente aquí es que cada vez que hace clic en un cuadro, establece ese cuadro como lo que es "actual" y luego muestra esos valores en la vista. http://jsfiddle.net/QeR7y/

Por lo general, esto se debe a otra directiva entre su ng-controller y su entrada que está creando un nuevo alcance. Cuando la selección escribe su valor, lo escribirá en el alcance más reciente, por lo que lo escribiría en este alcance en lugar del padre que está más lejos.

La mejor práctica es nunca vincular directamente a una variable en el alcance en un ng-model, esto también se conoce como incluir siempre un "punto" en su ngmodel. Para una mejor explicación de esto, mira este video de John:

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

Solución de: https://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU

Simplemente reemplacé ng-modelcon ng-checkedy funcionó para mí.

Este problema fue cuando actualicé mi versión angular de 1.2.28a1.4.9

También verifique si ng-changeestá causando algún problema aquí. Tuve que quitarme mi ng-changetambién para que funcionara.

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