Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy
ng-app 定义作用域,从作用域处开始执行ng命令指令
ng-model 数据绑定字符,用于双向数据绑定
ng-controller ng控制台,定义function name($scope)来填充controller内容。
ng-repeat 循环读取{{i in $scope.xx}} or {{i in [0,1,2,3,4]}} or {{i in ["aa","bb","cc"]}}
|filter:modelName 绑定查询标签
filter:
ng-repeat="phone in phones |filter:query
绑定的name与当前ng-controller或ng-app一致,当在controller中定义时,
只能在controller内可以获取到值,相当于在方法体内定义变量和在ng-app下定义公共变量
orderBy:
ng-repeat="phone in phones |orderBy:orderPro
绑定的name与当前ng-controller或ng-app一致,当在controller中定义时,
只能在controller内可以获取到值,相当于在方法体内定义变量和在ng-app下定义公共变量
$scope
Q:ng-repeat 重复读取

<div ng-app>
Hello {{'World'}}! Your name:<input type="text" ng-model="yourname" placeholder="World" />
<hr />
Hello {{ yourname || 'World'}}! {{99*5}} <div ng-controller="PhoneListCtrl">
<ul>
<li ng-repeat="phone in phones">
<span>{{phone.name}}</span>
<p>
{{phone.snippet}}
</p>
</li>
</ul>
</div> <p>Total number of phones: 2</p>
</div>
<script type="text/javascript">
function PhoneListCtrl($scope) {
$scope.phones = [
{ "name": "Nokia", "snippet": "Most memory when we was young" },
{ "name": "Motorola", "snippet": "Hello MOTO" },
{ "name": "XiaoMi4", "snippet": "Made in China" }
];
}
</script>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
A:ng版本原因,引用官方地址时出现此问题,引用本地其他版本时无此问题。
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy的更多相关文章
- 【AngularJS学习笔记】02 小杂烩及学习总结
表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> < ...
- AngularJs学习笔记--Understanding Angular Templates
原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与mode ...
- 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 ...
随机推荐
- python3+selenium入门09-键盘事件
Keys类提供了键盘上几乎所有按键的方法.通过send_keys()方法不仅可以用来模拟键盘输入,还可以用它来模拟键盘上的按键.包括组合键,比如Ctrl+a等 需要导入Keys类 from selen ...
- makefile实例
#.PHONY:cleanall cleanobj cleandiff #cleanall:cleandiff cleanobj # rm program #cleanobj: # rm obj.c ...
- Error occurred in deployment step 'Retract Solution': xxx 无法反序列化,因为它没有公共的默认构造函数
一.环境:SharePoint 2016 + Visual Studio 2015, 二.错误描述: 错误1:帮朋友写个计时器Demo,部署位置GAC,来回部署几次后,vs2015报错: 严重性 代码 ...
- vue2.x + vux采坑总结(一)
1.<tab-bar> 切换时,iocn高亮跟着切换问题 vux的Tabbar组件是用来实现底部tab栏,详情见官网文档 , 实现实例截图: 代码如下,控制高亮的是代码凸显部分:selec ...
- Go断言
用Go语言提供的类型检测方法,同时也可作为断言的解决方案: package main import ( "fmt" "reflect" ) type MyStr ...
- 用于主题检测的临时日志(c5ac07a5-5dab-45d9-8dc2-a3b27be6e507 - 3bfe001a-32de-4114-a6b4-4005b770f6d7)
这是一个未删除的临时日志.请手动删除它.(5051e554-d10d-4e48-b2ca-37c38a30153a - 3bfe001a-32de-4114-a6b4-4005b770f6d7)
- 23)django-缓存
一:目录 1)简介 2)django缓存方式 3)django应用方式 二:简介 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显, 最简单解决方 ...
- 彻底搞透OAuth 2.0
OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛应用,目前的版本是2.0版. 本文对OAuth 2.0的设计思路和运行流程,做一个简明通俗的解释,主要参考材料为R ...
- LONG数据类型转换为VARCHAR2并相互转换
--方法1,支持表 --plsql中将long类型隐式转换为varchar2,但是sql不能CREATE OR REPLACE FUNCTION LONG_TO_CHAR( in_rowid rowi ...
- LuoGu P1006 传纸条
题目传送门 这题嘛...方格取数和这题一样一样的 只不过这题是从左上到右下再回去罢了(来回一趟和来两趟有区别么?没有,那么这题和上题用一样的转移和状态就行了 没什么好说的,说一下我的错误好了: 人家图 ...