单击带有ng-click的复选框不会更新模型

Question

点击复选框,并要求NG-点击:不更新模型,所以该复选框值在UI呈现错误之前NG-点击踢:

这适用于AngularJS 1.0.7,并且似乎在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}}

和控制器:

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;

   };
}]);

破碎的小提琴w/Angular 1.2 RCx - http://jsfiddle.net/supercobra/ekD3r/

使用Angular 1.0.0的工作小提琴 - http://jsfiddle.net/supercobra/8FQNw/

Answer 1

如何改变

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

至

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

来自docs:

用户更改输入时评估给定的表达式.当值更改来自模型时,不会计算表达式.

注意,该指令需要ngModel存在.

Answer 2

如https://github.com/angular/angular.js/issues/4765所述,从ng-click切换到ng-change似乎解决了这个问题(我使用的是Angular 1.2.14)

Answer 3

执行ng-click和ng-model执行的顺序是不明确的(因为它们都没有明确设置priority).对此最稳定的解决方案是避免在同一元素上使用它们.

此外,您可能不希望示例显示的行为; 您希望checkbox响应完整标签文本的点击,而不仅仅是复选框.因此,最清洁的解决方案是包住input(有ng-model)内的label(与ng-click):

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

工作示例:http://jsfiddle.net/b3NLH/1/

Answer 4

为什么不用

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

或者另一种解决方案是todo.done在ng-click回调中设置内部并仅使用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}}

和

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

Answer 5

用ng-checked更换ng-model对我来说很有用.