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 ...
随机推荐
- cocos开发插件笔记
写插件菜单时要注意大小写 { "name": "hello-world", "version": "0.0.1", &q ...
- SeaJS:一个适用于 Web 浏览器端的模块加载器
什么是SeaJS?SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容.在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Definit ...
- 如何在同一台电脑上使用两个github账户(亲测有效)
1 前言 由于有两个github账号,要在同一台电脑上同步代码,需要给每一个账号添加一个SSH public key,此时推送时git push origin,不知道是哪个账号的远程仓库名称,所以需要 ...
- @ModelAttribute设置request、response、session对象
利用spring web提供的@ModelAttribute注解 放在类方法的参数前面表示引用Model中的数据 @ModelAttribute放在类方法上面则表示该Action类中的每个请求调用之前 ...
- js-DOM事件
var EventUtil = { addHandler:function(elm,type,handler){//添加事件 if(elm.addEventListener){ elm.addEven ...
- Swift 学习- 04 -- 字符串和字符
// 字符串 和 字符 // 字符串 是有序的 Character (字符) 类型的值的集合, 通过 String 类型的集合 // swift 的 String 和 Character 类型提供了 ...
- STM32L476应用开发之八:便携式气体分析仪项目总结
在本次项目中,我们实现的实际上是2套设备:便携式氧气分析仪以及便携式甲烷分析仪.但这两台仪器实际使用的主控板我们是设计了一套,所以主控板是适合于这两个设备的. 1.硬件设计 便携式气体分析仪的功能比较 ...
- Confluence 6 数据库整合的方法 1:基本流程
步骤 1:对你的插件进行记录 对你近期在 Confluence 中安装和启用的插件进行记录,这你可以在后期对插件进行重新安装或者调整.针对你安装的插件,你需要记录下面的一些内容: 插件名称 版本号 启 ...
- Confluence 6 CSS 指南:修改顶部背景
Confluence 默认页面的顶部是有关站点的菜单连接,在这里定义了 快速连接, 浏览菜单,用户菜单和快速查找输入框.在这个示例中,我们将会尝试修改顶部的菜单部分的背景和一些自定义的图片. 创建一个 ...
- ES6之Set与Map加深理解
Set 类似于数组,但是成员的值都是唯一的,没有重复的值,有序. Set函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化. 用途 数组去重: [...new ...