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. pytest七：assert断言

    断言是写自动化测试基本最重要的一步,一个用例没有断言,就失去了自动化测试的意义了.什么是断言呢?简单来讲就是实际结果和期望结果去对比,符合预期那就测试 pass,不符合预期那就测试 failed py ...

  2. ie7 下 float换行问题与vertical-align：middle; 失效问题

    声明:web小白的笔记,欢迎大神指点!联系QQ:1522025433. ie7 下 float换行问题 请直接看代码中和代码中的注释: <!doctype html> <html&g ...

  3. js随机生成颜色的方法

    function getRandomColor() { return '#' + (Math.random() * 0xffffff << 0).toString(16); }

  4. bzoj1026

    题意: windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道,在A和B之间,包括A和B,总共有多少个windy数? 数据范围  A,B≤ ...

  5. 矩阵优化dp

    链接:https://www.luogu.org/problemnew/show/P1939 题解: 矩阵优化dp模板题 搞清楚矩阵是怎么乘的构造一下矩阵就很简单了 代码: #include < ...

  6. C# 收发和处理自定义的WINDOWS消息

    C# 发送.接收和处理自定义的WINDOWS消息 转载地址:http://blog.chinaunix.net/uid-24427209-id-2608350.html 为了程序启动后自动执行主函数, ...

  7. BZOJ1303 [CQOI2009]中位数图 其他

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1303 题意概括 给出1~n的一个排列,统计该排列有多少个长度为奇数的连续子序列的中位数是b.中位数 ...

  8. StringBuilder和+来串接字符串，时间的比较

    一:程序比较 1.使用+ 2.使用的时间 虽然时间一直在变动,但是仍然可以看到时间在1000ms左右 3.使用StringBuilder 4.使用的时间 虽然时间每次在变化,但是时间在350ms左右变 ...

  9. 078 Hbase中rowkey设计原则

    1.热点问题 在某一时间段,有大量的数据同时对一个region进行操作 2.原因 对rowkey的设计不合理 对rowkey的划分不合理 3.解决方式 rowkey是hbase的读写唯一标识 最大长度 ...

  10. MySQL QA

    Q:MySQL常用的存储引擎有哪些? A:MyISAM及InnoDB,5.5版本后默认数据库引擎由MyISAM变为InnoDB Q:MyISAM及InnoDB有什么区别?至少5点 A: ①.InnoD ...