<!DOCTYPE html>

<html>

<head>

    <!-- Each of these scripts are the latest version of the library at the time this jsbin was created -->

    <!-- Twitter bootstrap -->

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>

    <!-- api-check is a dependency of angular-formly -->

    <script src="bower_components/api-check/dist/apiCheck.min.js"></script>

    <!-- angular.js is a dependency of angular-formly (obviously) -->

    <script src="bower_components/angular/angular.min.js"></script>

    <!-- This is angular-formly -->

    <script src="bower_components/angular-formly/dist/formly.min.js"></script>

    <!-- This is a bootstrap template libraray giving us some pre-defined types for bootstrap -->

    <script src="//rawgit.com/formly-js/angular-formly-templates-bootstrap/4.0.3/dist/angular-formly-templates-bootstrap.js"></script>

    <title>Angular Formly Lesson</title>

</head>

<body ng-app="formlyExample" ng-controller="MainCtrl as vm">

<div>

    <h1>

        angular-formly: Introduction<br />

        <small>Egghead.io lesson by @kentcdodds</small>

    </h1>

    <form name="vm.form" ng-submit="vm.onSubmit()" novalidate>

        <formly-form model="vm.model" fields="vm.fields"></formly-form>

        <button type="submit" class="btn btn-primary submit-button">Submit</button>

    </form>

    <form name="vm.form" ng-submit="vm.onSubmit()" novalidate>

        <div class="form-group">

            <label for="firstName">First Name</label>

            <input ng-model="vm.model.firstName" id="firstName" name="firstName" class="form-control" />

        </div>

        <button type="submit" class="btn btn-primary submit-button">Submit</button>

    </form>

    <h2>Model</h2>

    <pre>{{vm.model | json}}</pre>

    <h2>Fields <small>(note, functions are not shown)</small></h2>

    <pre>{{vm.originalFields | json}}</pre>

    <h2>Form</h2>

    <pre>{{vm.form | json}}</pre>

</div>

<script src="app.js"></script>

</body>

</html>
/* global angular */

(function() {

    'use strict';

    var app = angular.module('formlyExample', ['formly', 'formlyBootstrap']);

    app.controller('MainCtrl', function MainCtrl() {

        var vm = this;

        // funcation assignment

        vm.onSubmit = onSubmit;

        // variable assignment

        vm.model = {

            firstName: 'Obi Wan',

            something: {name: "default",value:"default"}

        };

        vm.fields = [

            {

                type: 'input',

                key: 'firstName',

                templateOptions: {

                    label: 'First Name'

                }

            },

            {

                template: '<hr />'

            },

            {

                type: 'select',

                key: 'something',

                templateOptions: {

                    label: 'Select Somthing',

                    options: [

                        {name: "wan", value: "Wan"},

                        {name: "obi", value: "Obi"},

                        {name: "Yui", value: "yui"}

                    ]

                }

            }

        ];

        // copy fields because formly adds data to them

        // that is not necessary to show for the purposes

        // of this lesson

        vm.originalFields = angular.copy(vm.fields);

        // function definition

        function onSubmit() {

            alert(JSON.stringify(vm.model), null, 2);

        }

    });

})();

[AngularJS] Introduction to angular-formly的更多相关文章

  1. [Angular] Use Angular components in AngularJS applications with Angular Elements

    When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...

  2. 【js类库AngularJs】解决angular+springmvc的post提交问题

    [js类库AngularJs]解决angular+springmvc的post提交问题 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前 ...

  3. [AngularJS] Introduction to ui-router

    Introduce to basic $stateProvider.state() with $stateParams services. Understand how nested router w ...

  4. [AngularJS] Lazy loading Angular modules with ocLazyLoad

    With the ocLazyLoad you can load AngularJS modules on demand. This is very handy for runtime loading ...

  5. [AngularJS] New in Angular 1.3 - Performance Boost with debugInfoEnabled

    By default, Angular provides a lot of debug information on the DOM that's only necessary for tools l ...

  6. [AngularJS] New in Angular 1.5 ng-animate-swap

    <!DOCTYPE html> <html ng-app="MyApplication"> <head> <link rel=" ...

  7. AngularJS进阶(五)Angular实现下拉菜单多选

    Angular实现下拉菜单多选 写这篇文章时,引用文章地址如下: http://ngmodules.org/modules/angularjs-dropdown-multiselect http:// ...

  8. AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选

    ANGULAR.JS: NG-SELECT AND NG-OPTIONS PS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以.英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档 ...

  9. [AngularJS] Using the Angular scope $destroy event and method

    With Angular scopes, you have access to a $destroy event that can be used to watch $scope events. Th ...

随机推荐

  1. gdb调试SAPI方式的php

    一.修改php-fpm.conf文件 /usr/local/php/etc/php-fpm.conf pm.max_children = 1 #只产生一个进程,便于追踪 二.得到进行服务的进程号 [r ...

  2. UVA 1515 Pool construction 水塘（最大流，经典）

    题意: 给一个h*w的矩阵,每个格子中是'#'和'.'两个符号之一,分别代表草和洞.现在要将洞给围起来(将草和洞分离),每条边需花费b元(即将一个洞包起来需要4边,将2个连续的洞包起来需要6边,省了2 ...

  3. 【转】JNI和NDK的区别

    原文网址:http://blog.csdn.net/ithomer/article/details/6828830 NDK(Native Development Kit)“原生”也就是二进制 andr ...

  4. 【转】C,C++中使用可变参数

    可变参数即表示参数个数可以变化,可多可少,也表示参数的类型也可以变化,可以是 int,double还可以是char*,类,结构体等等.可变参数是实现printf(),sprintf()等函数的关键之处 ...

  5. 应用MVP模式写出可维护的优美Android应用

    在Android开发中,我们常常会动辄写出数千行的Java类,而当一个Activity有4.5千行的时候,想找一个逻辑在哪儿就会显得异常痛苦了.比如想在数据加载错误的时候,显示一个提示信息,上上下下得 ...

  6. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...

  7. [转载]C#基础-Func,Action

    Func,Action 的介绍及其用法 Func是一种委托,这是在3.5里面新增的,2.0里面我们使用委托是用Delegate,Func位于System.Core命名空间下,使用委托可以提升效率,例如 ...

  8. android Bitmap getByteCount和getRowBytes

    今天做图像缓存需要计算Bitmap的所占的内存空间,于是研究了下Bitmap关于内存占用的API 1.getRowBytes:Since API Level 1,用于计算位图每一行所占用的内存字节数. ...

  9. Timus 1746 Hyperrook

    题意:在一个n维坐标系中,坐标的范围是0到m - 1,如果两个点坐标只有一个维度的坐标不同则可以相互移动,给出p个点,问任意两个点之间路径为d的个数是多少,答案与p取模. 解法:只需要考虑两个点之间不 ...

  10. [转] Envelop

    xiaohaidepoli原文Envelop Envelope也称包络线,是一个矩形区域,是每个几何形体的最小外接矩形.每个Geometry都拥有一个Envelope,包括Envelope自身. 它定 ...