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. PTA之多项式求值

    时间限制: 400ms 内存限制: 64MB 代码长度限制: 16KB 函数接口定义: double f( int n, double a[], double x ); 其中n是多项式的阶数,a[]中 ...

  2. java:利用java的输入/输出流将一个文件的每一行+行号复制到一个新文件中去

    import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; import java.io.Fi ...

  3. Python int 中 add abs 方法

    1+1 实际等于1.__add__(1) __abs__ 取绝对值

  4. 【Java】 剑指offer(34) 二叉树中和为某一值的路径

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 输入一棵二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有 ...

  5. C#连接数据库MD5数据库加密

    创建StringHelper类 首先数据库里的资料是加密了的. 创建将指定的字符串加密为MD5密文方法 public static string ToMD5(string source){ Strin ...

  6. PopupWindow下拉列表

    效果图 步骤: 1.画出编辑框的布局.popupWindow的布局.popupWindow中listview每行的布局 2.new一个PopupWindow对象,设置其属性 3.定义一个BaseAda ...

  7. Web侦察工具HTTrack （爬取整站）

    Web侦察工具HTTrack (爬取整站) HTTrack介绍 爬取整站的网页,用于离线浏览,减少与目标系统交互,HTTrack是一个免费的(GPL,自由软件)和易于使用的离线浏览器工具.它允许您从I ...

  8. 解决Ubuntu无法进行SSH连接的问题(以及如何使用SSH）

    我们在VM中安装好Ubuntu 虚拟机后,经常需要使用Xshell.ssh等工具进行远程连接,方便我们在两个操作系统中进行文件的复制与移动,但是有时候会出现无法连接的问题,原因可能是Ubuntu中默认 ...

  9. @ConfigurationProperties和@Value 注入

    我这里使用的Spring Boot 2.0.1 版本 配置文件是 yml 格式文件 @ConfigurationProperties 在yml配置文件中: 在实体类中: 重点是实体类上的两个注解: @ ...

  10. 开始使用Reflection

    用于 reflection 的类,如 Method,可以在 java.lang.relfect 包中找到.使用这些类的时候必须要遵循三个步骤:第一步是获得你想操作的类的 java.lang.Class ...