AngularJS中的复选框未触发onChange事件

时间:2019-07-10 17:49:25

标签: javascript angularjs

我在AngularJs中有一个ng单击的复选框。

下面是angularjs代码-

var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
  $scope.onClick = function() {
    alert($scope.test.value);
    console.log('checkbox changed ')
  };
});

下面是html代码-

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>

<body ng-app="formApp" ng-controller="formController">

  <div>
    <!-- CUSTOM VALUE CHECKBOXES -->
    <label>Personal Question</label>
    <div class="checkbox">
      <label>
        <input type="checkbox" 
               name="awesome" 
               ng-model="formData.awesome" 
               ng-true-value="ofCourse" 
               ng-false-value="iWish" 
               ng-click="onClick"> Are you awesome?
      </label>
    </div>
  </div>
</body>

</html>

但是当我单击复选框时,不会触发事件。 代码是here

知道为什么代码不起作用吗?

2 个答案:

答案 0 :(得分:2)

您缺少()ng-click="onClick()"

答案 1 :(得分:1)

将标记更改为onClick(),而不是onClick

<body ng-app="formApp" ng-controller="formController">


  <div>
   <!-- CUSTOM VALUE CHECKBOXES -->
        <label>Personal Question</label>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="awesome" ng-model="formData.awesome" ng-true-value="ofCourse" ng-false-value="iWish"

                ng-click="onClick()">
                Are you awesome?
            </label>
        </div>
      </div>

</body>

您要提醒的内容无效。将您的js更改为:

  $scope.onClick = function() {
    console.log('checkbox changed ')
  };

http://plnkr.co/edit/k2iRaYexQYQdjPGHIQon