Angularjs 使用ng click单击复选框不会更新模型

单击复选框并调用ng click：在ng click启动之前，模型不会更新，因此复选框值在UI中显示错误：

这在AngularJS 1.0.7中起作用，在Angular 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}}

带角1.2 RCx的破损小提琴 -

带角度1.0.0的工作小提琴

---

-

这是一种黑客行为，但在一个超时时间内完成它似乎可以实现您想要的：

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

---

执行

ng click

和

ng model

的顺序不明确（因为两者都没有明确设置其

优先级

）。最稳定的解决方案是避免在同一个元素上使用它们

此外，您可能不希望看到示例中显示的行为；您希望

复选框

响应对完整标签文本的单击，而不仅仅是复选框。因此，最干净的解决方案是将

输入

（使用

ng型号

）包装在

标签

（使用

ng点击

）内：

{{todo.text}

---

工作示例：

ng model和

ng click

之间的顺序似乎不同，这可能是您不应该依赖的。相反，您可以这样做：

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

这里的不同之处在于，无论何时单击一个框，它都会将该框设置为“当前”框，然后在视图中显示这些值

你为什么不使用

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

或者另一种解决方案是在ng click回调中设置

todo.done

，并且只使用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}}

换衣服怎么样

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

到

发件人：

当用户更改输入时计算给定表达式。当值更改来自模型时，不计算表达式

注意，本指令要求提供

ngModel

如中所述，从ng click切换到ng change似乎可以解决这个问题（我使用的是Angular 1.2.14）

通常这是由于ng控制器之间的另一个指令造成的 以及创建新范围的输入。当select写入时 如果输出它的值，它会将其写入最近的范围，因此 将其写入此范围，而不是更进一步的父范围 走开

最好的做法是永远不要直接绑定到作用域上的变量 在

ng型号中

，这也称为始终包含一个“点” 你的模型。要更好地解释这一点，请查看此视频 约翰：

---

来自的解决方案：

用检查过的ng替换ng模型对我有效。

我刚刚用检查过的ng替换了

ng模型

，它对我有效

这个问题发生在我将角度版本从

1.2.28

更新为

1.4.9

---

还要检查您的

ng更改是否导致此处出现任何问题。我不得不删除我的
ng更改
，以使其正常工作。
现在我已经将Angular更新为1.2+，在v1.2.24中也已损坏。这似乎在版本1.2.7中也已损坏神圣灯泡，蝙蝠侠！我以为我在做其他完全错误的事情，但结果就是这么简单。非常有用的答案+1 Angular doc-1如果您需要事件数据来防止默认值，该怎么办？最简单、最简单的修复方法+1对格里芬多说：）看@kakoni的回答，我用了ng change而不是ng click，而且计时效果很好。这可以让你保持双向绑定，而且更简洁。如果你在YouTube链接中提供一个跳转标记
#t=5m08s
，那就太好了，这样就不必观看完整的视频了。再见，非常感谢！这是唯一对我有效的解决方案！这个解决方案仍然是最好的！正是我想要的。谢谢刚刚从这里所有可用的解决方案中为我工作。谢谢，它工作了！
$watch('todo',function(.....

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

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

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

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