- checkbox 类型的 input 中本身有 onchange 事件，但是 onchange 事件里放 angular 的方法是不识别的，这就要用到一个方法：
，这样就可以随时随地调起 angular 方法啦，就是这么酸爽！angular.element(this).scope()
- 示例代码也包含了 file 类型的 input 选中文件后响应事件
文章目录
- 1. 运行效果
- 2. 示例代码
1. 运行效果
2. 示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CheckBox</title>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<style>
div {
display:flex;
width: 50%;
margin: auto;
flex-direction: row;
align-items: center;
border-bottom: 1px solid black;
}
div * {
flex:1;
}
span {
color: green;
}
</style>
</head>
<body ng-app = "mainApp" ng-controller = "TestController">
<div>
<p>选中则提示</p>
<input type="checkbox" onchange="check(this)">
</div>
<div>
<p>点击则提示</p>
<input type="checkbox" onclick="myclick(this)">
</div>
<div>
<p>绑定angular方法：{{isChecked}}</p>
<input type="checkbox" onchange="angular.element(this).scope().checkChange(this)">
</div>
<div>
<p>选择文件后触发angular方法<br><span>{{fileName}}</span></p>
<input type="file" onchange="angular.element(this).scope().getfiles(this)">
</div>
</body>
</html>
<script>
function check(element){
if(element.checked){
alert('已选中');
} else {
}
}
function myclick(element){
alert(element.checked);
}
var mainApp = angular.module("mainApp", []);
mainApp.controller("TestController", function($scope){
$scope.isChecked = false;
$scope.fileName = '未选择文件';
$scope.checkChange = function(element){
$scope.isChecked = element.checked;
$scope.$apply();
}
$scope.getfiles = function(element){
console.log(element.files);
$scope.fileName = '已选中文件：'+ element.files[0].name;
$scope.$apply();
}
});
</script>
![没救了! 困扰程序员一辈子的5个魔咒, 改掉比登天还难！[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)