AngularJS学习笔记(1)
<!DOCTYPE html>
<html>
<body> <div ng-app="">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div> <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> </body>
</html>
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图
<div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br>
名: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}} </div> <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
ng-controller 指令定义了应用程序控制器。
AngularJS 过滤器
AngularJS 过滤器可用于转换数据：
| 过滤器 | 描述 |
|---|---|
| currency | 格式化数字为货币格式。 |
| filter | 从数组项中选择一个子集。 |
| lowercase | 格式化字符串为小写。 |
| orderBy | 根据某个表达式排列数组。 |
| uppercase | 格式化字符串为大写。 |
AngularJS学习笔记(1)的更多相关文章
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- html5，表单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- UITableView中Cell和section的插入与删除
插入段: - (void)insertSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animati ...
- DIV 垂直 垂直水平 居中
DIV 垂直 居中 让div居中对齐 使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐. .style{margin-left:auto;marg ...
- Postgresql 帐号密码修改方法
1.Linux环境下 #su postgres -bash-3.2$psql -U postgres postgres=#alter user postgres with password 'new ...
- C语言中执行到预编译
在Linux中,执行命令:gcc -o linux.i linux.c -E
- iOS开发中的内存分配（堆和栈）
进程的内存分区 所有进程(执行的程序)都必须占用一定数量的内存,它或是用来存放从磁盘载入的程序代码,或是存放取自用户输入的数据等等.不过进程对这些内存的管理方式因内存用途不一而不尽相同,有些内存是事先 ...
- bootstrap-table 加载不了数据问题总结
1.Without server-side pagination data-side-pagination="client"(bs-table的设置) 服务器端代码: @Reque ...
- 赤红血OL
包含海量的PSD文档!!全PSD源文档-446M.你值得拥有! <ignore_js_op> <ignore_js_op> <ignore_js_op> <i ...
- maven环境快速搭建
----------------准备工作------------- Jdk 1.5以上java开发环境. Eclipse IDE 一个. Maven 3.0.3下载地址: http://maven. ...
- iOS 圆角图片
// 开启图形上下文UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);// 剪裁 UIBezierPath *path=[UIBezi ...