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>

1. 动态form还有这么玩的

<!DOCTYPE html>

<html>

<head>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

    <meta charset="utf-8">

    <!--

Created using JS Bin

http://jsbin.com

Copyright (c) 2017 by morlay (http://jsbin.com/dadono/2/edit)

Released under the MIT license: http://jsbin.mit-license.org

-->

    <meta name="robots" content="noindex">

    <title>JS Bin</title>

</head>

<body ng-controller="RepeatController as vm">

    <form name="form">

        <div ng-repeat="field in vm.fields">

            <span ng-bind="field.name"></span>

            <input ng-model="value" dynamic-name="field.name">

            <span ng-bind="value"></span>

        </div>

    </form>

</html>

<script>

angular

    .module('rf', [])

    .directive('dynamicName', dynamicNameDirective)

    .controller('RepeatController', repeatController);

angular.bootstrap(document, ['rf']);

// @ngInject

function repeatController($scope) {

    console.log($scope);

    this.fields = [{

            name: 'name0'

        },

        {

            name: 'name1'

        },

        {

            name: 'name2'

        }

    ];

    return this;

}

function dynamicNameDirective() {

    return {

        restrict: 'A',

        priority: 10000,

        controller: dynamicNameController

    };

}

// @ngInject

function dynamicNameController($scope, $element, $attrs, $parse) {

    var name = $parse($attrs.dynamicName)($scope);

    delete($attrs.dynamicName);

    $element.removeAttr('data-dynamic-name');

    $element.removeAttr('dynamic-name');

    $attrs.$set("name", name);

}

</script>

<script src="http://static.jsbin.com/js/render/edit.js?4.1.0"></script>

<script>

jsbinShowEdit && jsbinShowEdit({ "static": "http://static.jsbin.com", "root": "http://jsbin.com" });

</script>

<script>

(function(i, s, o, g, r, a, m) {

    i['GoogleAnalyticsObject'] = r;

    i[r] = i[r] || function() {

        (i[r].q = i[r].q || []).push(arguments)

    }, i[r].l = 1 * new Date();

    a = s.createElement(o),

        m = s.getElementsByTagName(o)[0];

    a.async = 1;

    a.src = g;

    m.parentNode.insertBefore(a, m)

})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

ga('create', 'UA-1656750-34', 'auto');

ga('require', 'linkid', 'linkid.js');

ga('require', 'displayfeatures');

ga('send', 'pageview');

</script>

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

  1. [K/3Cloud] 如何从被调用的动态表单界面返回数据

    在需要返回数据的地方调用表单返回方法完成数据返回 this.View.ReturnToParentWindow(retData); 在调用界面的回调函数中取出返回结果的ReturnData即可使用. ...

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

    非Core中的请参照: MVC的验证 jquery.validate.unobtrusive mvc验证jquery.unobtrusive-ajax 参照向动态表单增加验证 页面引入相关JS: &l ...

  3. [K/3Cloud]调用动态表单时,传递自定义参数

    插件中在调用动态表单时,通过DynamicFormShowParameter的CustomParams,增加自定义的参数. private void ShowMaterialStock() { obj ...

  4. 循序渐进VUE+Element 前端应用开发(27）--- 数据表的动态表单设计和数据存储

    在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...

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

    AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证.一.手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件: 1.给for ...

  6. Angular动态表单生成（七）

    动态表单生成之拖拽生成表单(上) 这个功能就比较吊炸天了,之前的六篇,都是ng-dynamic-forms自带的功能,可能很多的说明官方的文档都已经写了,我只是个搬运工,而在这篇文章中,我将化身一个工 ...

  7. Angular动态表单生成（六）

    动态表单之根据Json生成表单 我们在实际的使用中,动态表单往往是由服务器端的一系列配置,然后返回数据给客户端,最后客户端根据数据来动态的生成表单.那么怎么像我们上面所描述的这样,生成一个可以让我们的 ...

  8. Angular动态表单生成（二）

    ng-dynamic-forms源码分析 在两个开源项目中,ng-dynamic-forms的源码相较于form.io,比较简单,所以我还勉强能看懂,下面就我自己的理解进行简单分析,若有不对的地方,请 ...

  9. Angular动态表单生成（一）

    好久不写博客了,手都生了,趁着最近老大让我研究动态表单生成的时机,撸一发博客~~ 开源项目比较 老大丢给我了两个比较不错的开源的动态表单生成工具,这两个项目在github上的star数量基本持平: h ...

随机推荐

  1. 性能测试二十八：环境部署之Dubbo部署

    Zookeeper部署 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一 ...

  2. python 全栈开发，Day106(结算中心(详细),立即支付)

    昨日内容回顾 1. 为什么要开发路飞学城? 提供在线教育的学成率: 特色: 学,看视频,单独录制增加趣味性. 练,练习题 改,改学生代码 管,管理 测,阶段考核 线下:8次留级考试 2. 组织架构 - ...

  3. 支付宝回调JAVA版代码

    支付宝回调: 1 //这个是支付宝回调的信息 2 @RequestMapping("alipay_callback.do") 3 @ResponseBody 4 public Ob ...

  4. 基于OSGI.NET的MVC插件式开发

    最近在研究OSGI.NET插件式开发框架.官方网站提供了一个基于OSGI.NET的插件仓库.下载官方的SDK包安装后VS项目模板会多出一组iOpenWorks项目模板.在学习过程中,发现通过iOpen ...

  5. [九省联考2018]一双木棋chess

    题解: 水题吧 首先很显然的是状压或者搜索 考虑一下能不能状压吧 这个东西一定是长成三角形的样子的 所以是可以状压的 相邻两位之间有几个0代表他们差几 这样最多会有2n 然后就可以转移了 由于之前对博 ...

  6. BZOJ1178 [Apio2009]CONVENTION会议中心 贪心 set

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1178 题意概括 一堆线段,现在取出最多条数,使其互不覆盖,并输出字典序最小的方案. 题解 这题好坑 ...

  7. 【转】TCP三次握手和四次挥手全过程及为什么要三次握手解答

    TCP三次握手和四次挥手的全过程   TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 位码即tcp标志位,有6种表示: SYN(synchronous建立连接) ...

  8. (转)CASE WHEN 用法

    Case具有两种格式.简单Case函数和Case搜索函数. 简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END   ...

  9. 蛋疼的mocha库-promise异步测试

    mocha 测试库的使用 错误的处理异步测试 异步当出现断言错误的时候,他会抛出错误,但不会把这次测试当作失败,就是正确的顺利通过测试了,很无语. promise的reject会在then的第二个函数 ...

  10. 用js来实现那些数据结构02（数组篇02-数组方法）

    上一篇文章简单的介绍了一下js的类型,以及数组的增删方法.这一篇文章,我们一起来看看数组还有哪些用法,以及在实际工作中我们可以用这些方法来做些什么.由于其中有部分内容并不常用,所以我尽量缩小篇幅.在这 ...