AngularJs之二
今天先讲一个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之二的更多相关文章
- AngularJS进阶(二十七)实现二维码信息的集成思路
AngularJS实现二维码信息的集成思路 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,与君共勉! 注:点击此处进行知识充电 ...
- angularjs(二)模板终常用的指令的使用方法
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- angularjs指令(二)
最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...
- angularJS 服务二
$http服务 一 介绍 AngularJS为我们提供了很多种服务,$http用于发送http请求,动态的请求数据.我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏 ...
- 媲美jQuery的JS框架----AngularJS(二)
前言 对于AngularJS什么,小编在这就不多做介绍了.大家可以看小编的上一篇博客. 言归正传,小编在上一篇博客中介绍了AngularJS中的指令.表达式还有非常实用的三种服务.接下来,带大家看一看 ...
- AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储
AngularJS项目开发技巧之localStorage存储 注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...
- angularJS(二):作用域$scope、控制器、过滤器
app.controller创建控制器 一.作用域 Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. ...
- angularjs笔记(二)
AngularJS API 4.AngularJS过滤器 使用一个管道符(|)添加到表达式和指令中 例1.格式化字母转为大写 <!DOCTYPE html> <html> &l ...
- angularJS 指令二
指令详解1.用directive()方法来定义指令.directive('myDirective',function($timeout,userDefinedService){ return {};} ...
随机推荐
- .NET平台常用的框架整理
基于.NET平台常用的框架整理 DotNet | 2016-03-31 17:13 (点击上方蓝字,可快速关注我们) 来源:天使不哭 链接:http://www.cnblogs.com/hgmyz/p ...
- 基于dubbo构建分布式项目与服务模块
关于分布式服务架构的背景和需求可查阅http://dubbo.io/.不同于传统的单工程项目,本文主要学习如何通过maven和dubbo将构建分布项目以及服务模块,下面直接开始. 创建项目以及模块 ...
- 【NEUQACM OJ】1018: A+B again
1018: A+B again 题目描述 谷学长有一个非常简单的问题给你,给你两个整数A和B,你的任务是计算A+B. 输入 输入的第一行包含一个整数T(T<=20)表示测试实例的个数,然后2*T ...
- JQuery基本知识框架思维导图(上)
一:认识jQuery 1.window.onload与$(document).ready()的对比 2.jQuery代码风格(1:链式代码风格2:位代码添加注释) 3.jQuery对象和DOM对象(1 ...
- 闭包和重写函数 返回IE浏览器版本号
开发过程中我们有时候需要知道IE的版本号,我们知道得到IE的版本号的方法: var v = 3, div = document.createElement('div'), all = div.getE ...
- 一站式解决,Android 拍照 图库的各种问题.
在android开发中, 在一些编辑个人信息的时候,经常会有头像这么一个东西,就两个方面,调用系统相机拍照,调用系统图库获取图片.但是往往会遇到各种问题: 1.oom 2.图片方向不对 3.activ ...
- ssm简单配置
MyBatis 是一个可以自定义SQL.存储过程和高级映射的持久层框架. MyBatis 摒除了大部分的JDBC代码.手工设置参数和结果集重获. MyBatis 只使用简单的XML 和注解来配置和映射 ...
- nmap
扫描端口 nmap -v -sS -open -iL iplist.txt -no-stylesheet -oX output.xml -p- -P0 -v 详细信息-sS 隐蔽扫描(半开syn).– ...
- HTML5 使用application cache 接口实现离线数据缓存
1.配置缓存文件 cache manifest MIME TYPE:text/cache-manifest文件名称:name.appcache作用:用于配置需要缓存的文件 2.使用方法 在服务器上添加 ...
- About kaychen
关于我 现武汉科技大学,大二学生.互联网前端技术爱好者,未来想从事前端开发工作.进入前端开发领域之前,作为创始人之一,创建了武汉江城时空电子商务有限责任公司.目前在海投网前端开发小组实习.热爱互联网行 ...