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 ...
随机推荐
- pt-table-sync同步报错Called not_in_left in state 0 at /usr/bin/pt-table-sync line 5231【原创】
试验环境MySQL5.7.19,自己使用pt-table-sync 3.0.2版本同步后,手动在从库执行后,在用pt-table-sync验证时报错 命令如下: pt-table-,u=用户名,p=, ...
- python3+requests库框架设计01-自动化测试框架需要什么?
什么是自动化测试框架 关于自动化测试框架的定义有很多,在我大致理解下就是把能实现不同功能的软件组合在一起,实现特定的目的,这就是一个简单的自动化测试框架. 接口自动化测试框架核心无非是选择 一个用来编 ...
- powerdesigner 使用技巧 建模工具 导出sql 导出实体类 导出word
显示comment列 Table Properties(表属性)=>Columns(列)=>Customize Columns and Filter(自定义列过滤) 勾上 comment ...
- 高效的多维空间点索引算法 — Geohash 和 Google S2
原文地址:https://www.jianshu.com/p/7332dcb978b2 引子 每天我们晚上加班回家,可能都会用到滴滴或者共享单车.打开 app 会看到如下的界面: app ...
- 专题2:最长上升子序列LIS
A HDU 1025 Constructing Roads In JGShining's Kingdom B POJ 3903 Stock Exchange C OpenJ_B ...
- safarai - loading.close() 无效问题
代码环境: vue + elenment 问题描述: 上传文件时,显示loading动画:上传成功后,隐藏loading动画.window 下常用的浏览正常,safari 下的chrome浏览器(目前 ...
- $Django 发送邮件--django封装模块和python内置SMTP模块
一 使用SMTP模块发送邮件 import smtplib from email.mime.text import MIMEText from email.header import Header m ...
- 如何安装和配置RabbitMQ
今天开始一个小小的练习,学习一下安装和配置RabbitMQ,为什么要学它,因为WCF可以完全兼容和使用RabbitMQ了.我们新的大数据系统需要使用消息队列,所以就开始研究一下,把它重新封装一下,更便 ...
- Servlet随笔
HttpServlet中的getRequestURL.getRequestURI.getContextPath方法获取的字符串为 jsp文件会被编译成一个Servlet,该Servlet继承自Http ...
- adb ( Android Debug Bridge)
adb ( Android Debug Bridge) 是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信.它可为各种设备操作提供便利,如安装和调试应用. adb工具的工 ...