85

チェックボックスをクリックして 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;

   };
}]);

壊れた Fiddle と Angular 1.2 RCx - http://jsfiddle.net/supercobra/ekD3r/

Angular 1.0.0 で動作するフィドル - http://jsfiddle.net/supercobra/8FQNw/

4

10 に答える 10

167

変えてみたらどうですか

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

に

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

ドキュメントから：

ユーザーが入力を変更したときに、指定された式を評価します。値の変更がモデルからのものである場合、式は評価されません。

このディレクティブがngModel存在する必要があることに注意してください。

于 2013-11-22T11:30:07.607 に答える
11

https://github.com/angular/angular.js/issues/4765で報告されているように、ng-click から ng-change に切り替えると、これが修正されるようです (Angular 1.2.14 を使用しています)。

于 2014-03-05T18:06:24.547 に答える
7

ng-model を ng-checked に置き換えるとうまくいきます。

于 2016-08-16T19:38:33.183 に答える
1

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/

于 2013-10-21T14:34:15.697 に答える
0

に置き換えただけng-modelでng-checked、うまくいきました。

この問題は、角度バージョンをからに更新したときに発生し1.2.28ました1.4.9

また、ng-changeここで問題が発生しているかどうかを確認してください。ng-changeそれを機能させるには、同様に削除する必要がありました。

于 2016-10-24T11:04:48.077 に答える
0

通常、これは新しいスコープを作成している ng-controller と入力の間の別のディレクティブが原因です。select がその値を書き出すとき、それは最新のスコープに書き込まれるため、遠くにある親ではなく、このスコープに書き込まれます。

ベスト プラクティスは、スコープ内の変数に直接バインドしないことですng-model。これは、ngmodel に常に「ドット」を含めることとしても知られています。これについてのより良い説明については、John の次のビデオをご覧ください。

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

解決策: https://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU

于 2014-06-11T13:55:35.233 に答える
-1 
.task{ng:{repeat:'task in model.tasks'}}
  %input{type:'checkbox',ng:{model:'$parent.model.tasks[$index].enabled'}}
于 2015-03-29T23:36:18.570 に答える