- checkbox 类型的 input 中本身有 onchange 事件,但是 onchange 事件里放 angular 的方法是不识别的,这就要用到一个方法:
angular.element(this).scope()
,这样就可以随时随地调起 angular 方法啦,就是这么酸爽! - 示例代码也包含了 file 类型的 input 选中文件后响应事件
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>