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

Question

单击复选框并调用 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}}

和控制器：

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;

   };
}]);

Broken Fiddle 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">

来自文档：

当用户更改输入时评估给定的表达式。当值更改来自模型时，不会评估表达式。

请注意，此指令必须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响应对完整标签文本的点击，而不仅仅是复选框。因此，最干净的解决方案是将 (with ) 包裹在input( ng-modelwith 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.doneng-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 对我有用。

Answer 6

这是一种 hack，但将其包装在超时中似乎可以完成您正在寻找的内容：

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

Answer 7

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>

还有你的脚本：

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;

   };
}]);

这里的不同之处在于，每当您单击一个框时，它都会将该框设置为“当前”，然后在视图中显示这些值。http://jsfiddle.net/QeR7y/

Answer 8

通常这是由于您的 ng-controller 和正在创建新范围的输入之间的另一个指令。当 select 写出它的值时，它会把它写到最近的范围，所以它会把它写到这个范围而不是更远的父级。

最佳实践是永远不要直接绑定到范围内的变量ng-model，这也称为始终在 ngmodel 中包含“点”。为了更好地解释这一点，请查看 John 的这段视频：

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

解决方案来自：https ://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU

Answer 9

我刚刚替换ng-model为ng-checked它对我有用。

这个问题是当我将我的角度版本从更新1.2.28到1.4.9

还要检查您ng-change是否在此处引起任何问题。我必须把我ng-change的也去掉才能让它工作。

Answer 10

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