ng-click으로 확인란을 클릭해도 모델이 업데이트되지 않습니다.

ng-click으로 확인란을 클릭해도 모델이 업데이트되지 않습니다.

---

체크 박스를 클릭하고 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가있는 Broken Fiddle- http: //jsfiddle.net/supercobra/ekD3r/

- / 각도 1.0.0 승 fidddle 작업 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합니다.

---

As reported in https://github.com/angular/angular.js/issues/4765, switching from ng-click to ng-change seems to fix this (I am using Angular 1.2.14)

---

The order in which ng-click and ng-model will be executed is ambiguous (since neither explicitly set their priority). The most stable solution to this would be to avoid using them on the same element.

Also, you probably do not want the behavior that the examples show; you want the checkbox to respond to clicks on the complete label text, not only the checkbox. Hence, the cleanest solution would be to wrap the input (with ng-model) inside a label (with ng-click):

<label ng-click="onCompleteTodo(todo)">
  <input type='checkbox' ng-model="todo.done">
  {{todo.text}}
</label>

Working example: http://jsfiddle.net/b3NLH/1/

---

Why dont you use

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

Or another solution would be to set the todo.done inside the ng-click callback and only use 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}}

and

$scope.onCompleteTodo = function(todo) {
        todo.done = !todo.done; //toggle value
        console.log("onCompleteTodo -done: " + todo.done + " : " + todo.text);
        $scope.current = todo;
}

---

Replacing ng-model with ng-checked works for me.

---

It is kind of a hack but wrapping it in a timeout seems to accomplish what you are looking for:

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

---

The ordering between ng-model and ng-click seems to be different and it's something you probably shouldn't rely on. Instead you could do something like this:

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

And your script:

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;

   };
}]);

What's different here is whenever you click a box, it sets that box as what's "current" and then display those values in the view. http://jsfiddle.net/QeR7y/

---

Usually this is due to another directive in-between your ng-controller and your input that is creating a new scope. When the select writes out it value, it will write it up to the most recent scope, so it would write it to this scope rather than the parent that is further away.

The best practice is to never bind directly to a variable on the scope in an ng-model, this is also known as always including a "dot" in your ngmodel. For a better explanation of this, check out this video from John:

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

Solution from: https://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU

---

I just replaced ng-model with ng-checked and it worked for me.

This issue was when I updated my angular version from 1.2.28 to 1.4.9

Also check if your ng-change is causing any issue here. I had to remove my ng-change as-well to make it working.

---

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

참고URL : https://stackoverflow.com/questions/19496821/clicking-a-checkbox-with-ng-click-does-not-update-the-model