136、angularjs 动态表单, 原生事件中调用angular方法

- 日理万妓 2023-06-05 08:22 6阅读 0赞

[https://www.cnblogs.com/wancy86/p/7834067.html][https_www.cnblogs.com_wancy86_p_7834067.html]

<input type="file" name="rule" οnchange="angular.element(this).scope().fileChanged1(this)">

原生事件中，这里默认传入实参this，指的是input上传的内容；在angular1事件中，这里为空，所以需要用原生事件，调用angular1方法.

#### 1. 原生事件中调用angular方法, 比如 input的onChange事件想调用angular里面定义的方法 - **onChange="angular.element(this).scope().uploadPhoto(this)"** ####

<div class="col-md-2"> <input onChange="angular.element(this).scope().uploadPhoto(this)" type="file" style="display: none;width: 0px;height: 0px;" ng-model="$parent.photos[$index]" name="newImg_{ {$index}}" id="newImg_{ {$index}}"/> <button class="button button-energized" style="margin-bottom: 2px;" ng-click="selectPhoto($index)"><i class="ion-android-upload"></i> <span>上传图片</span></button> <button ng-if="$index>0" class="button button-energized" ng-click="delImg($index)"><i class="ion-android-close"></i> <span>删除图片</span></button> </div>

#### 1. 动态表单, 注意用到的`ng-init` 和 `this[size]` ####

<div ng-app ng-init='size="X";X="165cm";XL="175cm"'> <p>X标准:<input ng-model="X"></p> <p>XL标准:<input ng-model="XL"></p> <p>选择你的体恤尺寸： <select ng-model="size"> <option>X</option> <option>XL</option> </select></p> <p>实际尺寸大小： <input name="123" ng-model="this[size]"></p> </div>

转载于:https://www.cnblogs.com/gushixianqiancheng/p/11384464.html

[https_www.cnblogs.com_wancy86_p_7834067.html]: https://www.cnblogs.com/wancy86/p/7834067.html

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 136、angularjs 动态表单, 原生事件中调用angular方法

[https://www.cnblogs.com/wancy86/p/7834067.html][https_www.cnblogs.com_wancy86_p_7834067

- 日理万妓/ 2023年06月05日 08:22/ 0 赞/ 7 阅读

相关表单验证<AngularJs>

常用的表单验证指令 1. 必填项验证某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可： <input type="t

向右看齐/ 2022年09月25日 03:26/ 0 赞/ 270 阅读

相关表单动态验证之原生Ajax

什么是 AJAX? > AJAX代表异步JavaScript和XML。 > 简而言之，它是使用 XMLHttpRequest 对象与服务器端脚本进行通信。它可以发送以

￡神魔★判官ぃ/ 2022年07月14日 08:59/ 0 赞/ 217 阅读

相关 AngularJS表单验证

基本格式 <!DOCTYPE html> <html lang="en"> <head> <meta charse

拼搏现实的明天。/ 2022年07月14日 08:54/ 0 赞/ 285 阅读

相关 AngularJS表单验证

一.常用的表单验证指令 <div class="col-md-6"> <form role="form" class="form-horizo

ゝ一世哀愁。/ 2022年04月06日 10:58/ 0 赞/ 281 阅读

相关 angularJS表单验证

最近因为毕设和工作原因需要学习angularJS技术，这里就记录一下自己学习angularJS表单验证的一些收获。一份简单的代码如下： <!DOCTYPE htm

待我称王封你为后i/ 2022年02月21日 01:48/ 0 赞/ 337 阅读

相关 Angular表单

文章目录一、\[ngModelOptions\]="\{standalone: true\}" 是什么意思？为什么在我们的项目中使用ngModel的时

电玩女神/ 2022年02月17日 09:30/ 0 赞/ 233 阅读

相关 AngularJS表单验证

AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件，然后使用 $dirty 和 $invalid标志做验证的

小鱼儿/ 2021年09月14日 06:58/ 0 赞/ 470 阅读

相关 angular4 动态表单

angular 表单引入表单组/表单创建/及验证相关类 import { FormGroup, FormBuilder, Validators, FormControl...

小鱼儿/ 2021年04月24日 14:25/ 0 赞/ 568 阅读

相关 angularJS表单验证

客户端表单验证是AngularJS里面最酷的功能之一。 AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。在AngularJ...

朱雀/ 2020年10月24日 18:06/ 0 赞/ 953 阅读