使用 ng-click 单击复选框不会更新模型 [英] Clicking a checkbox with ng-click does not update the model

问题描述

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

这在 AngularJS 1.0.7 中有效，但在 Angular 1.2-RCx 中似乎已损坏.

<li ng-repeat="待办事项中的待办事项"><input type='checkbox' ng-click='onCompleteTodo(todo)' ng-model="todo.done">{{todo.text}}<小时>任务:{{todoText}}<hr><h2>错误的值</h2>完成:{{doneAfterClick}}

和控制器:

angular.module('myApp', []).controller('Ctrl', ['$scope', function($scope) {$scope.todos=[{'text': "拿牛奶",'完成':真的},{'文本':得到牛奶2"，'完成':假}];$scope.onCompleteTodo = 函数(待办事项){console.log("onCompleteTodo -done:" + todo.done + ":" + todo.text);$scope.doneAfterClick=todo.done;$scope.todoText = todo.text;};}]);

带有 Angular 1.2 RCx 的 Broken Fiddle- http://jsfiddle.net/supercobra/ekD3r/

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

解决方案

如何改变

到

来自文档:

<块引用>

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

注意，该指令要求 ngModel 存在.

Clicking on a checkbox and calling ng-click: the model is not updated before ng-click kicks in so the checkbox value is wrongly presented in the UI:

This works in AngularJS 1.0.7 and seems broken in 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}}

and controller:

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/

Working fidddle w/ Angular 1.0.0 - http://jsfiddle.net/supercobra/8FQNw/

解决方案

How about changing

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

to

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

From docs:

Evaluate given expression when user changes the input. The expression is not evaluated when the value change is coming from the model.

Note, this directive requires ngModel to be present.

这篇关于使用 ng-click 单击复选框不会更新模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！