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的更多相关文章

  1. 【AngularJS学习笔记】02 小杂烩及学习总结

    表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> < ...

  2. AngularJs学习笔记--Understanding Angular Templates

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与mode ...

  3. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  4. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  5. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  6. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  7. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  8. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  9. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  10. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

随机推荐

  1. cocos开发插件笔记

    写插件菜单时要注意大小写 { "name": "hello-world", "version": "0.0.1", &q ...

  2. SeaJS:一个适用于 Web 浏览器端的模块加载器

    什么是SeaJS?SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容.在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Definit ...

  3. 如何在同一台电脑上使用两个github账户(亲测有效)

    1 前言 由于有两个github账号,要在同一台电脑上同步代码,需要给每一个账号添加一个SSH public key,此时推送时git push origin,不知道是哪个账号的远程仓库名称,所以需要 ...

  4. @ModelAttribute设置request、response、session对象

    利用spring web提供的@ModelAttribute注解 放在类方法的参数前面表示引用Model中的数据 @ModelAttribute放在类方法上面则表示该Action类中的每个请求调用之前 ...

  5. js-DOM事件

    var EventUtil = { addHandler:function(elm,type,handler){//添加事件 if(elm.addEventListener){ elm.addEven ...

  6. Swift 学习- 04 -- 字符串和字符

    // 字符串 和 字符 // 字符串 是有序的 Character (字符) 类型的值的集合,  通过 String 类型的集合 // swift 的 String 和 Character 类型提供了 ...

  7. STM32L476应用开发之八:便携式气体分析仪项目总结

    在本次项目中,我们实现的实际上是2套设备:便携式氧气分析仪以及便携式甲烷分析仪.但这两台仪器实际使用的主控板我们是设计了一套,所以主控板是适合于这两个设备的. 1.硬件设计 便携式气体分析仪的功能比较 ...

  8. Confluence 6 数据库整合的方法 1:基本流程

    步骤 1:对你的插件进行记录 对你近期在 Confluence 中安装和启用的插件进行记录,这你可以在后期对插件进行重新安装或者调整.针对你安装的插件,你需要记录下面的一些内容: 插件名称 版本号 启 ...

  9. Confluence 6 CSS 指南:修改顶部背景

    Confluence 默认页面的顶部是有关站点的菜单连接,在这里定义了 快速连接, 浏览菜单,用户菜单和快速查找输入框.在这个示例中,我们将会尝试修改顶部的菜单部分的背景和一些自定义的图片. 创建一个 ...

  10. ES6之Set与Map加深理解

    Set 类似于数组,但是成员的值都是唯一的,没有重复的值,有序. Set函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化. 用途 数组去重: [...new ...