Angularcheckbox和ng-click
angular度1.2:
<input type="checkbox" ng-model="vm.myChkModel" ng-click="vm.myClick(vm.myChkModel)">
我的myClick
函数中没有正确的状态?
点击后,我想要的状态。
ng-click
和ng-model
的执行顺序是不明确的,因为它们没有定义明确的优先级。 相反,您应该在$scope
使用ng-change
或$watch
,以确保您获得模型variables的正确值。
在你的情况下,这应该工作:
<input type="checkbox" ng-model="vm.myChkModel" ng-change="vm.myClick(vm.myChkModel)">
您可以使用ng-change而不是ng-click:
<!doctype html> <html> <head> <script src="1.2.3/angular.min.js"></script> <script> var app = angular.module('myapp', []); app.controller('mainController', function($scope) { $scope.vm = {}; $scope.vm.myClick = function($event) { alert($event); } }); </script> </head> <body ng-app="myapp"> <div ng-controller="mainController"> <input type="checkbox" ng-model="vm.myChkModel" ng-change="vm.myClick(vm.myChkModel)"> </div> </body> </html>
cardeal的回答是非常有帮助的。 花了一点时间,并认为它可能会帮助其他人下线。 这是小提琴:
https://jsfiddle.net/vtL5x0wh/
和代码:
<body ng-app="checkboxExample"> <script> angular.module('checkboxExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.value0 = "none"; $scope.value1 = "none"; $scope.value2 = "none"; $scope.value3 = "none"; $scope.checkboxModel = { critical1: {selected: true, id: 'C1', error:'critical' , score:20}, critical2: {selected: false, id: 'C2', error:'critical' , score:30}, critical3: {selected: false, id: 'C3', error:'critical' , score:40}, myClick : function($event) { $scope.value0 = $event.selected; $scope.value1 = $event.id; $scope.value2 = $event.error; $scope.value3 = $event.score; } }; }]); </script> <form name="myForm" ng-controller="ExampleController"> <label> Value1: <input type="checkbox" ng-model="checkboxModel.critical1.selected" ng-change="checkboxModel.myClick(checkboxModel.critical1)"> </label><br/> <label>Value2: <input type="checkbox" ng-model="checkboxModel.critical2.selected" ng-change="checkboxModel.myClick(checkboxModel.critical2)"> </label><br/> <label>Value3: <input type="checkbox" ng-model="checkboxModel.critical3.selected" ng-change="checkboxModel.myClick(checkboxModel.critical3)"> </label><br/><br/><br/><br/> <tt>selected = {{value0}}</tt><br/> <tt>id = {{value1}}</tt><br/> <tt>error = {{value2}}</tt><br/> <tt>score = {{value3}}</tt><br/> </form>
ng-click和ng-model的执行顺序与1.2和1.6的angular度不同
你必须用1.2和1.6来testing,
例如,使用angular度1.2,ng-click在ng-model之前获得执行,使用angular度1.6,ng-model可能在ng-click之前执行。
所以你得到'真正的检查'/'假取消'价值可能不是你所期望的