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 ...
随机推荐
- 定制化rpm包及本地yum仓库搭建
为方便本地yum的管理,一般都是在公司局域网内搭建本地yum仓库,实现公司内部快速安装常用软件. 步骤如下: 1.搭建要实现本地yum管理的软件,测试该软件搭建成功与否: 2.定制rpm包及其相关依赖 ...
- 从url(地址栏)获取参数:Jquery中getUrlParam()方法的使用
我想要获取如下id 如下代码(传参要加问好!!) function getUrlParam(id) { var regExp = new RegExp('([?]|&)' + id+ '=([ ...
- HashMap多线程put后get为null和多线程put的时候可能导致元素丢失
一.多线程put后get为null 源码定位 void transfer(Entry[] newTable) { Entry[] src = table; int newCapacity = newT ...
- MVC异步方法
在mvc的开发过程中,有时候我们会需要在action中调用异步方法,这个时候会需要做一些特殊处理.我们会使用到await和async.对应的controller也应该是async的. 在MVC4中直接 ...
- VI和VIM
linux下vi.VIM命令大全 进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + file ...
- Ex4_21 最短路径算法可以应用于货币交易领域..._第十二次作业
(a) 建立一个有向图G(V,E),每个顶点表示一种货币,两个顶点之间的边权的大小ex[u][v]表示两种货币之间的汇率,若要找一个最有利的兑换序列,把货币s兑换成货币t,即在若干种兑换序列中选择 ...
- 信息摘要算法之四:SHA512算法分析与实现
前面一篇中我们分析了SHA256的原理,并且实现了该算法,在这一篇中我们将进一步分析SHA512并实现之. 1.SHA简述 尽管在前面的篇章中我们介绍过SHA算法,但出于阐述的完整性我依然要简单的说明 ...
- windows Sever 2012下Oracle 12c安装配置方法图文教程
windows Sever 2012下Oracle 12c安装配置方法图文教程 Oracle 12c安装配置方法图文教程,具体内容如下 1.我们开启虚拟机 2.Windows Sever 2012启动 ...
- Confluence 6 修改你站点的外观和感觉
你可以为你的 Confluence 整个站点修改表现以及外观和感觉,也可以为单独的空间进行修改. 对整个站点进行的修改将会对使用全局外观和感觉(look and feel)的空间一并进行修改.如果某个 ...
- (七)STL适配器
1.适配器是稍微修改某些功能,比如三个参数改为两个参数,函数的名称改一下等等,可以出现在容器.迭代器和仿函数中. 2.适配器相当于对某个东西进行封装,例如A是B的适配器,则真正的功能实现是在B中,可以 ...