Question

我正在使用javascript UI库作为DHTMLX或YUI等。我正在使用AngularJS来处理动态页面。我需要的只是简单。

UI code is 
...
<Input type="checkbox" name="XXX" />
....
My.js
...
app.controller('XXXCtrl', function($scope){
  $scope.$watch(???){
   if (XXX) console.log("checkbox was checked!!!");
   else console.log("checkbox was unchecked!!!");
   ????
 };
})

我是AngularJS的新手。请帮帮我!!!

Answer 1

您必须通过ng-model将值绑定到范围。 documentation中有更多细节，但您可以这样做：

$scope.checkboxModel = true;
$scope.myAction = function () {
    msg = $scope.checkboxModel ? 'checked' : 'unchecked';
    console.log(msg);
};

在您的HTML文件中：

<form name="myForm" ng-controller="XXXCtrl">
    <label>Value1:
        <input type="checkbox" name="XXX" ng-model="checkboxModel" ng-change="myAction()">
    </label><br/>
    <tt>value1 = {{checkboxModel}}</tt><br/>
</form>

Answer 2

您可以使用document.getElementById结合ng-click事件监听器来访问窗口对象

var app = angular.module('myApp', []);
app.controller('appCtrl', function($scope) {
  
  $scope.checker= function(e){
    
    var chkBox = document.getElementById(e.target.id);
   
       console.log(chkBox.checked) 
    
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
  <div ng-controller='appCtrl'>
 <input type="checkbox" id="myCheckbox" name="myCheckbox" ng-click="checker($event)"/>
 </div>
  </div>

如何检测AngularJS中单击的复选框？

2 个答案: