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

https://www.cnblogs.com/wancy86/p/7834067.html

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

时间: 2024-10-11 05:14:10

angularjs 动态表单, 原生事件中调用angular方法的相关文章

element 验证表单的对象中的对象方法

在验证的属性字段中加上双引号即可,如下: rules: { //正常的验证规则 Type: [ { required: true, message: '请选择赠送卡券类型', trigger: 'change' } ], //对象中的对象验证规则 "CouponList.Value": [ { required: true, message: '请输入卡券数值', trigger: 'blur' }, ], } 原文地址:https://www.cnblogs.com/zhengchu

如何在.Net Core MVC中为动态表单开启客户端验证

非Core中的请参照: MVC的验证 jquery.validate.unobtrusive mvc验证jquery.unobtrusive-ajax 参照向动态表单增加验证 页面引入相关JS: <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/jquery-validation/dist/jquery.validate.js"></

AngularJS实现表单手动验证和表单自动验证

AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证.一.手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件: 1.给form元素加上novalidate="novalidate": 2.给form元素加上name="theForm",如下: <!DOCTYPE html> <html lang="en" ng-app="myApp1"

javaweb日记选(动态表单及表的实现)

Java语言也可以创建动态表单,如javaweb创建表单及表 应用场景 项目中往往需要动态的创建一个表单,或者添加一个新的数据模板,这时候因为需要在运行时动态的创建表以及动态的维护表字段甚至表关系 使得普通java解决方案变得困难重重. 实现工具 Hibernate + Spring + Groovy +Freemarker Hibernate 作用很简单负责创建数据库表这样可以避免我们自己去写复杂的sql和判断. Spring 作为桥梁起到连接纽带的作用 Groovy 做为动态语言,在项目运行

Angular动态表单生成(二)

ng-dynamic-forms源码分析 在两个开源项目中,ng-dynamic-forms的源码相较于form.io,比较简单,所以我还勉强能看懂,下面就我自己的理解进行简单分析,若有不对的地方,请大家多多指正. 整体结构分析 ng-dynamic-forms的主要代码均分布在packages文件夹下,其中的Core是各种控件的抽象,其他的文件夹是各个UI框架的具体封装,每个文件夹都是一个可独立编译运行的项目. Core文件夹内容分析 Core文件夹做的事情,基本上是对于各种组件.布局的抽象,

Angular动态表单生成(七)

动态表单生成之拖拽生成表单(上) 这个功能就比较吊炸天了,之前的六篇,都是ng-dynamic-forms自带的功能,可能很多的说明官方的文档都已经写了,我只是个搬运工,而在这篇文章中,我将化身一个工程师,来自己创造点东西,让我们一起来期待吧~ 导入相关类库 拖拽功能看似吊炸天,其实HTML5中已经有一套标准来定义它了,所以并没有那么难以实现,这篇关于拖拽的文章写得还可以,大家可以先看看:http://www.zhangxinxu.com/wordpress/2011/02/html5-drag

angularJS 过滤器 表单验证

过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)Date(3)Filter子串匹配用来处理一个数组,可以过滤出含有某个子串的元素,作为一个字数组来返回.通常用来过滤需要展示的元素.可以是字符串数字,对象或是一个用来从数组中选择元素的函数.字符串:返回所有包含这个字符串的元素对象:将待过滤对象的属性同这个对象中的同名属性进行对比,如果属性值是字符串就

动态表单数据库设计

需求: 能够根据数据库在界面动态显示表单,包括表单类型.名称等,并且必须提供 添加新表单,修改表单等功能. 为了满足客户不断的需求变化,有时候需要为某商品增加.修改.删除.属性,这样的话以往的数据库表就很难实现, 因为表的字段是定死了 如果你需要增加一个属性的时候 ,就必须修改表,听说这是不允许的~~. 所以我们要设计一个灵活的数据库 下面以电脑设备为例: pc 现有属性 name cpu ram disk 现在我们要为pc添加一个 mainboard 属性. 既然必须提供增加表单,那么我们创建

关于表单form元素中onsubmit事件处理机制的认识

博主目前处于Js学习的初期,遇到了很多问题,比如今天的关于表单form元素中onsubmit事件问题,根据教程所述,onsubmit事件是在表单提交的时候触发的,但是我看到教程上的onsubmit事件是这么写的 :onsubmit="return validateForm();",首先validateForm()已经有返回值了,为什么在这里还要加一个return??这让我百思不得其解,直到看到一篇博文才恍然大悟,受益匪浅,以下是这篇博文的出处:http://blog.163.com/h