checkbox 类型的 input 中本身有 onchange 事件,但是 onchange 事件里放 angular 的方法是不识别的,这就要用到一个方法:angular.element(this).scope()
,这样就可以随时随地调起 angular 方法啦,就是这么酸爽!示例代码也包含了 file 类型的 input 选中文件后响应事件
文章目录
1. 运行效果2. 示例代码1. 运行效果
2. 示例代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title>CheckBox</title><script src="/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>