Clicar em uma caixa de seleção e chamar o ng-click: o modelo não é atualizado antes que o ng-click seja ativado, então o valor da caixa de seleção é apresentado incorretamente na IU:
Isso funciona no AngularJS 1.0.7 e parece estar quebrado no 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}}
e controlador:
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;
};
}]);
Broken Fiddle c / Angular 1.2 RCx - http://jsfiddle.net/supercobra/ekD3r/
Working fidddle w / Angular 1.0.0 - http://jsfiddle.net/supercobra/8FQNw/
Respostas:
Que tal mudar
<input type='checkbox' ng-click='onCompleteTodo(todo)' ng-model="todo.done">
para
<input type='checkbox' ng-change='onCompleteTodo(todo)' ng-model="todo.done">
Dos documentos :
fonte
Conforme relatado em https://github.com/angular/angular.js/issues/4765 , mudar de ng-click para ng-change parece corrigir isso (estou usando Angular 1.2.14)
fonte
A ordem em que
ng-click
eng-model
serão executados é ambígua (uma vez que nenhum dos dois definiu explicitamente o seupriority
). A solução mais estável para isso seria evitar usá-los no mesmo elemento.Além disso, você provavelmente não deseja o comportamento que os exemplos mostram; você deseja que o
checkbox
responda a cliques no texto completo do rótulo , não apenas na caixa de seleção. Portanto, a solução mais limpa seria envolver oinput
(comng-model
) dentro de umlabel
(comng-click
):<label ng-click="onCompleteTodo(todo)"> <input type='checkbox' ng-model="todo.done"> {{todo.text}} </label>
Exemplo de trabalho: http://jsfiddle.net/b3NLH/1/
fonte
Por que você não usa
$watch('todo',function(.....
Ou outra solução seria definir o
todo.done
retorno de chamada do ng-click e usar apenas o 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}}
e
$scope.onCompleteTodo = function(todo) { todo.done = !todo.done; //toggle value console.log("onCompleteTodo -done: " + todo.done + " : " + todo.text); $scope.current = todo; }
fonte
Substituir ng-model por ng-CHECK funciona para mim.
fonte
É uma espécie de hack, mas encerrá-lo em um tempo limite parece realizar o que você está procurando:
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; }); }; }]);
fonte
A ordem entre
ng-model
eng-click
parece ser diferente e é algo em que você provavelmente não deve confiar. Em vez disso, você poderia fazer algo assim:<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>
E seu roteiro:
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; }; }]);
A diferença aqui é que sempre que você clica em uma caixa, ela define essa caixa como "atual" e, em seguida, exibe esses valores na visualização. http://jsfiddle.net/QeR7y/
fonte
Solução de: https://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU
fonte
#t=5m08s
em seu link do YouTube para que não seja necessário assistir o vídeo completo. Veja mattcutts.com/blog/link-to-youtube-minute-secondAcabei de substituir
ng-model
porng-checked
e funcionou para mim.Esse problema foi quando eu atualizei minha versão angular de
1.2.28
para1.4.9
Verifique também se isso
ng-change
está causando algum problema aqui. Tive que remover meung-change
também para fazê-lo funcionar.fonte
.task{ng:{repeat:'task in model.tasks'}} %input{type:'checkbox',ng:{model:'$parent.model.tasks[$index].enabled'}}
fonte