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. 深入理解 sudo 与 su 之间的区别【转】

    深入理解 sudo 与 su 之间的区别 两个命令的最大区别是: sudo 命令需要输入当前用户的密码,su 命令需要输入 root 用户的密码.另外一个区别是其默认行为.sudo 命令只允许使用提升 ...

  2. 节流(Throttling)和去抖(Debouncing)详解

    这篇文章的作者是 David Corbacho,伦敦的一名前端开发工程师.之前我们有一篇关于”节流”和”去抖”的文章:The Difference Between Throttling and Deb ...

  3. python3+selenium入门16-窗口截图

    有时候需要把一些浏览器当前窗口截图下来,比如操作抱错的时候.WebDriver类下.get_screenshot_as_file()方法可窗口截图,需要传入一个截图文件名的路径.window要用\\当 ...

  4. 博客主Judge已跳槽搬家emmm

    跳槽网站:博客园 顺便带一下:洛谷blog (好久没更了QAQ...) ### 不过csdn上还是会照常更新的,毕竟用着方便

  5. 在 VS 2013/2015 中禁用 nuget 包的源代码管理

    对于加入源代码管理如TFS的解决方案,当使用nuget获取包时,下载的包并没有自动从源代码管理中排除,导致包(packages文件夹)会一同上传到服务器. 若要排除nuget包的源代码管理,须在 解决 ...

  6. linux 新机器的配置(git + nodejs+ mongodb)

    安装nodejs: wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz tar xvf node-v6.9.5-linux ...

  7. java的小数比较反例

    double num = 0.3; System.out.println(num); System.out.println(num - 0.2); System.out.println(num - 0 ...

  8. 1.ROS启动小乌龟

        启动turtlesim 在三个不同的终端中分别执行如下三个指令 roscore rosrun turtlesim turtlesim_node rosrun turtlesim turtle_ ...

  9. 【原创】运维基础之OpenResty

    openresty 1.15.8.1 官方:https://openresty.org/en/ 一 简介 OpenResty® is a dynamic web platform based on N ...

  10. Python-多表关联 外键 级联

    分表为什么分表 多表关联多表关系 ****** 表之间的关系 为什么要分表 多对一 一个外键 多对多 一个中间表 两个外键 一对一 一个外键加一个唯一约束外键约束 ****** foreign key ...