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

Program / 글쓴이

확인란을 클릭하고 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합니다.

답변

https://github.com/angular/angular.js/issues/4765 에보고 된대로 ng-click에서 ng-change로 전환하면이 문제가 해결되는 것 같습니다 (Angular 1.2.14 사용 중).

답변

ng-click및 ng-model실행될 순서는 명확하게 설정되지 않았기 때문에 모호합니다.priority . 이것에 대한 가장 안정적인 해결책은 동일한 요소에서 사용하지 않는 것입니다.

또한 예제가 보여주는 동작을 원하지 않을 수도 있습니다. 체크 박스뿐만 아니라 checkbox전체 라벨 텍스트 에 대한 클릭에 응답하기 를 원합니다 . 따라서, 깨끗한 용액을 포장하는 것 input(와를 ng-model돌며) label(와 ng-click)

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

작동 예 : http://jsfiddle.net/b3NLH/1/

답변

사용하지 않는 이유 

$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;
}

답변

ng-model을 ng-checked로 대체하면 나를 위해 작동합니다.

답변

일종의 해킹이지만 시간 초과로 래핑하면 원하는 것을 달성하는 것 같습니다.

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

답변

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/