如何在angularjs中选中并取消选中复选框时运行函数?

时间:2016-07-29 02:56:10

标签: javascript angularjs

我在这里看到了各种各样的问题,但它们都是经过检验的,我认为这与我无关。我有一个相当简单的问题。这是我的HTML。

<label><input type="checkbox" value="" ng-checked="dothis" id="alcohol">Serves alcohol</label>

我不知道如果检查它,如何将函数包装成angular。基本上它应该是。

if(checked){
//do this
}
else{
//do that
}

2 个答案:

答案 0 :(得分:3)

使用ngModelngChange

<input type="checkbox" ng-model="foo" ng-change="fooChanged()" />

//in controller
$scope.foo = false;
$scope.fooChanged = function(){
    if($scope.foo){
        ...
    }else{
        ...
    }
}

答案 1 :(得分:0)

使用ngModel双向绑定值。

虽然ngChange是可选的。

请在此处找到文档:https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

请找到下面的工作演示

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
  angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.checkboxModel = {
       value1 : true,
       value2 : 'YES'
     };
    }]);
</script>
<form ng-app="checkboxExample" name="myForm" ng-controller="ExampleController">
  <label>Value1:
    <input type="checkbox" ng-model="checkboxModel.value1">
  </label><br/>
  <label>Value2:
    <input type="checkbox" ng-model="checkboxModel.value2"
           ng-true-value="'YES'" ng-false-value="'NO'">
   </label><br/>
  <tt>value1 = {{checkboxModel.value1}}</tt><br/>
  <tt>value2 = {{checkboxModel.value2}}</tt><br/>
 </form>
&#13;
&#13;
&#13;