點擊與NG-點擊複選框不更新模型

Question

單擊複選框，並要求NG-點擊：該模型沒有更新，因此複選框值在UI錯誤地呈現前NG-點擊踢：

這適用於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; 

    }; 
}]); 

破碎的小提琴瓦特/角1.2 RCX - http://jsfiddle.net/supercobra/ekD3r/

工作fidddle瓦特/角1.0.0 - http://jsfiddle.net/supercobra/8FQNw/

Answer 1

如何改變

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

到

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

從docs：

當用戶改變輸入評價給定的表達式。當值改變來自模型時，表達式不被評估。

注意，此指令要求ngModel存在。

Answer 2

這是怎樣的一個黑客，但在超時包裝似乎來完成你在找什麼：

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

Answer 3

其中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/

Answer 4

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/

Answer 5

你爲什麼不使用

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

或者另一種解決方案是設置了NG-點擊回調裏面todo.done僅使用納克單擊

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

Answer 6

據報道在https://github.com/angular/angular.js/issues/4765，從開關NG-點擊NG-變化似乎解決這個問題（我用角1.2.14）

Answer 7

通常這是因爲另一個指令在兩者之間你ng控制器 和您正在創建新範圍的輸入。當select將 寫出它的值時，它會將其寫入最近的作用域，所以它將 寫入此作用域而不是進一步 以外的父域。

最好的做法是不要直接在ng-model綁定變量的作用域 ，這也被稱爲總是包括 你ngmodel一個「點」。對於這一個更好的解釋，從約翰看看這個視頻 ：

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

解決方案來源：https://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU

Answer 8

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

Answer 9

與我NG-檢查工作更換NG-模型。

Answer 10

我剛剛用ng-checked替換ng-model，它適用於我。

這個問題是，當我從我的角度1.2.28更新版本以1.4.9

還要檢查，如果你的ng-change這裏造成任何問題。我不得不刪除我的ng-change，以使其工作。