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. Python3学习笔记32-xlwt模块

    xlwt模块是用来写入excel的第三方模块,需要下载安装后才能使用. 设置字体样式 import xlwt #初始化一个excel excel = xlwt.Workbook(encoding='u ...

  2. MYSQL在centos上主从配置

    主从配置理论传送门:http://blog.csdn.net/hguisu/article/details/7325124 具体配置方案: 一:MYSQL主从配置   1.1 部署环境 主(maste ...

  3. Java二维码生成与解码

      基于google zxing 的Java二维码生成与解码   一.添加Maven依赖(解码时需要上传二维码图片,所以需要依赖文件上传包) <!-- google二维码工具 --> &l ...

  4. Day8--------------源码安装

    yun install python 在yum源中 wget 地址 下载 下载---------->解包-------->运行config脚本添加编译参数--------->编译(g ...

  5. ipfs上传下载

    上传下载步骤: 启动ipfs节点服务器: 页面效果显示如下: 当在一个终端启动ipfs节点服务器之后之后,上传下载步骤: 1.创建文件demo4,新建一个文件a.txt,文本内容为hello mkdi ...

  6. Python 队列

    import multiprocessing import time if __name__ == '__main__': # 创建消息队列 # 3: 表示消息队列最大个数 queue = multi ...

  7. Python中加入中文注释

    最近开发学习Pyton,当加入中文注释时,运行程序报错: File SyntaxError: Non-ASCII character , but no encoding declared; see h ...

  8. c# 图片插入Excel

    引用COM:Microsoft Office 11.0 Object Library 引用类:    using System;    using System.Windows.Forms;    u ...

  9. Modbus库开发笔记:Modbus ASCII Slave开发

    与Modbus RTU在串行链路上分为Slave和Master一样,Modbus ASCII也分为Slave和Master,这一节我们就来开发Slave.对于Modbus ASCII从站来说,需要实现 ...

  10. Confluence 6 SQL Server 测试你的数据库连接

    在你的数据库设置界面,有一个 测试连接(Test connection)按钮可以检查: Confluence 可以连接你的数据库服务器 数据库字符集和隔离级别是正确的 你的数据库用户有正确的数据库权限 ...