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. 全局JavaScript对象

  2. 【C++ Primer | 10】STL算法

    第一部分 find(beg, end, val) equal(beg1, end, beg2) min(val1, val2) max(val1, val2) min_element(beg, end ...

  3. [转]MyEclipse8.5破解方法

    本文是转自其它博文,用以留着备份的~ Step: 1.建立一个任意名称的Java Project 2.在该工程中建立一个名文MyEclipseGen的Java文件(MyEclipseGen.java) ...

  4. [解决]IP地址非法，请接入联通热点后重新获取

    在使用联通chinaunicom WLAN上网时,在弹出的登陆界面后输入账号.密码,点登陆,显示IP地址非法,请接入联通热点后重新获取.现在在其他地方看到解决办法连接chinaunicom,弹出登陆界 ...

  5. python错误、调试、测试

    1.错误, Python内置的try...except...finally用来处理错误十分方便.出错时,会分析错误信息并定位错误发生的代码位置才是最关键的. 程序也可以主动抛出错误,让调用者来处理相应 ...

  6. Codeforces Round #429 (Div. 2) - D Leha and another game about graph

    Leha and another game about graph 题目大意:给你一个图,每个节点都有一个v( -1 , 0 ,1)值,要求你选一些边,使v值为1 的点度数为奇数,v值为0的度数为偶数 ...

  7. Queuing HDU2604

    一道递推题目 得到递推关系为  f[n]=f[n-1]+f[n-3]+f[n-4]; 用普通的枚举算法会超时 所以要用矩阵快速幂来加速 转化为矩阵即为: +1 0 1 1       F(N-1) F ...

  8. 057 Hive项目案例过程

    1.说明 这里只粘贴一张,图,主要针对的hive的项目的实践过程. 2.图 3.需求 统计PV 统计注册人数 => 这个是一个公司会关注的,每天的注册率. 统计ip 统计跳出率 => ip ...

  9. Unity3D 之 console面板的停靠

    是否苦于不知如何停靠console, 是否后悔将它拉出来, 是否在纠结为何没办法拉回去. 将console或其他面板停靠的方法有两种: 1.Window -> Layouts -> Def ...

  10. [OpenCV-Python] OpenCV 中的图像处理 部分 IV (三）

    部分 IVOpenCV 中的图像处理 OpenCV-Python 中文教程(搬运)目录 19 Canny 边缘检测 目标 • 了解 Canny 边缘检测的概念 • 学习函数 cv2.Canny() 1 ...