angularJS(2)

今天先讲一个angularJs的表单绑定实例:

<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
姓:<input type="text" ng-model="user.xing"><br>
名:<input type="text" ng-model="user.ming"><br>
<button ng-click="reset()">RESET</button>
</form>
<h2 style="color:#F00">新值 = {{user }}</h2>
<h2>原值 = {{master}}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {xing:"张", ming:"三"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>

注:novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。

接下来写两个angularJs循环列举数组

<div ng-app=“” ng-init=“car=[‘宝马’,‘奥迪’,‘奔驰‘,’保时捷’,’法拉利’]">  <p>使用 ng-repeat 来循环数组</p>  <ul>    <li ng-repeat="x in car"> {{ x }}  </li>  </ul></div> 
<div ng-app=“” ng-init=“names=[{name:‘王小波’,class:‘傻子班’},{name:‘王如花’,class:‘大班’},{name:‘武则天’,class:‘预科班'}]">
<ul>
<li ng-repeat="x in names"> {{ x.name + ', ' + x.class }} </li>
</ul>
</div>

angularJS(2)的更多相关文章

  1. angularJS(6)

    angularJS(6) 一:angularJs的事件. 1.ng-click指令定义了AngularJS点击事件. <div ng-app="myapp" ng-contr ...

  2. angularJS(5)

    angularJS(5) 一,数据循环:特别要注意作用域 使用ng-repeat指令. <div ng-app="myApp" ng-controller="myC ...

  3. angularJS(4)

    angularJS(4) 一:angulaJs的作用域scope Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带.scope 是一个 JavaScr ...

  4. angularJS(3)

      angularJS(3) 一.angularJs的指令模型ng-model指令 ng-model 指令 绑定 HTML 元素 到应用程序数据. 为应用程序数据提供类型验证(number.email ...

  5. AngularJS(1)

    AngularJS(1) 在讲正题之前,先说一下有关angular简介方面的信息: 1. angularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优 ...

  6. 学习笔记-AngularJs(十)

    前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要 ...

  7. 学习笔记-AngularJs(九)

    到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以 ...

  8. 学习笔记-AngularJs(七)

    在学习笔记-AngularJs(六)提及了事件处理器和过滤器以及它们的例子,而我们知道之前我是使用$http服务去获得我们需要的json数据,但是$http是比较底层的用法,有时候我们想把获取json ...

  9. 学习笔记-AngularJs(六)

    在学习笔记-AngularJs(五),通过引入bootstrap.css进行改写整个样式,这时学习项目也变得好看多了,现在我们又需要目录再进行一次改变,如下图: 这样就符合之前讲的对学习目录进行布置了 ...

随机推荐

  1. NET Core-学习笔记(一)

    .net core最近园子讨论频率很高的话题,从不久前发布正式版本后,也是开始从netcore官网一步一步走向学习之路:.net跨平台的设计让人很是兴奋起来,因为做了多年的互联网研发者,见识了很多一流 ...

  2. Django:手把手带你入门

    一.开发环境: Python:2.7:PyCharm 4 二.Django的安装: 打开Pycharm --> 新建项目--> 看图操作--> 自动安装Django环境 三.创建第一 ...

  3. jeffy-vim-v3.0

    jeffy-vim-v3.0 修改了配色.

  4. Scala集合和Java集合对应转换关系

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 转载请注明出处 用Scala编码的时候,经常会遇到scala集合和Java集合互相转换的case,特意mark一 ...

  5. jackson简单使用,对象转json,json转对象,json转list

    添加jackson依赖: // https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core compile g ...

  6. [php]laravel框架容器管理的一些要点

    本文面向php语言的laravel框架的用户,介绍一些laravel框架里面容器管理方面的使用要点.文章很长,但是内容应该很有用,希望有需要的朋友能看到.php经验有限,不到位的地方,欢迎帮忙指正. ...

  7. JavaScript原型链分析

    Js之原型链    1.object 与 Object        1.object是类型,表示对象类型        2.Object是函数    2.js成员的访问规则        o.方法( ...

  8. 简述9种社交概念 SNS究竟用来干嘛?

    1.QQ 必备型交流工具基本上每一个网民最少有一个QQ,QQ已经成为网民的标配,网络生活中已经离不开QQ了.虽然大家嘴上一直在骂 QQ这个不好,那个不对,但是很少有人能彻底离开QQ.QQ属于IM软件, ...

  9. zip函数-Python 3

    zip函数接受任意多个(包括0个和1个)序列作为参数,返回一个tuple列表. zip函数在获取数据后,生成字典(dict)时比较好用. for examples: # Code based on P ...

  10. java泛型基础

    泛型是Java SE 1.5的新特性, 泛型的本质是参数化类型, 也就是说所操作的数据类型被指定为一个参数. 这种参数类型可以用在类.接口和方法的创建中, 分别称为泛型类.泛型接口.泛型方法.  Ja ...