1. ホーム
  2. angularjs

[解決済み] ng-clickでチェックボックスをクリックしてもモデルが更新されない

2023-05-23 23:05:47

質問

チェックボックスをクリックして ng-click を呼び出すと、ng-click が起動する前にモデルが更新されないので、チェックボックスの値が UI で誤って表示されます。

これは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;

   };
}]);

Angular 1.2 RCx で壊れたフィドル - http://jsfiddle.net/supercobra/ekD3r/

Angular 1.0.0での動作確認済み。 - http://jsfiddle.net/supercobra/8FQNw/

どのように解決するのですか?

を変更してはいかがでしょうか。

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

から

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

から ドキュメント :

ユーザが入力を変更したときに、与えられた式を評価します。モデルから値が変更された場合は評価されない。

注意:このディレクティブは ngModel が存在する必要があります。