600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > input监听onchange触发angular事件(file选择 checkbox复选框勾选)

input监听onchange触发angular事件(file选择 checkbox复选框勾选)

时间:2022-11-01 16:00:00

相关推荐

input监听onchange触发angular事件(file选择 checkbox复选框勾选)

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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。