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. 将SublimeText 添加到鼠标右键的方法

  2. Linux中查找当前目录下占用空间最大的前10个文件

    du命令 计算出单个文件或者文件夹的磁盘空间占用 -a或--all:包含全部的文件系统: --block-size=<区块大小>:以指定的区块大小来显示区块数目: -h或--human-r ...

  3. SQL行装列PIVOT和列转行UNPIVOT

    数据 CREATE TABLE student( no int, ca ), name ), subject ), scorce int ); /* 数据 */ , ); , ); , ); , ); ...

  4. [转] 插件兼容CommonJS, AMD, CMD 和 原生 JS

    模块标准 CommonJS CommonJS 有三个全局变量 module.exports 和 require.但是由于 AMD 也有 require 这个全局变量,故不使用这个变量来进行检测. 如果 ...

  5. asp.net core 2.0 cookie的使用

    本文假设读者已经了解cookie的概念和作用,并且在传统的.net framework平台上使用过. cookie的使用方法和之前的相比也有所变化.之前是通过cookie的add.set.clear. ...

  6. Nordic Collegiate Programming Contest NCPC 2017-Problem D-Distinctive Character

    题目大意:给你n(n<=1e5)个二进制串 (每个串位数不超过20),定义两个串的相似度为对应 位置上相同的个数. 让你构造一个二进制串,使这个串与所给的这些串的相似度的最小值最大. 思路:刚开 ...

  7. java里获取uuid

    //获取32位uuid工具类 ,此类事java自带的,不需要导包public static String get32UUID() { String uuid = UUID.randomUUID().t ...

  8. 练习|Django-单表

    结构目录 页面展示: 1创建Django,创建app01 在modules.py添加 class Book(models.Model): id=models.AutoField(primary_key ...

  9. 消息确认机制---confirm异步

    一:介绍 1.异步模式介绍 Channel对象提供ConfirmListener()回调方法只包含deliverTag(当前Channel发出的序列号),我们需要自己为每一个Channel维护一个un ...

  10. Spring Boot 入门详细分析

    推荐阅读: 我们为什么要学习 Spring Boot 我们搭建 Spring Boot 项目,可以使用 Spring 为我们提供的初始化网站,那个可能不太方便,今天呢,我们就来说说如何使用 IDEA ...