Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy

时间:2021-10-11 13:00:54

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  重复读取

  Angularjs  学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy

 <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&lpar;概念&rpar;

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

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

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

随机推荐

  1. &lbrack;转载&rsqb; ubuntu下定制Vim&sol;Gvim及使用技巧

    vim是linux下的编辑器之神,是玩linux的必备工具,同样emacs是神的编辑器,两个编辑器是各有千秋,看个人的喜好,青菜萝卜各有所爱.我是比较喜欢vim,用vim编写bash,perl,pyt ...

  2. java异常处理机制&lpar;try-catch-finally&rpar;

    /* * 异常处理机制 * 1.分类:Error和Exception * Error错误是JVM自动报错的,程序员无法解决例如开数组过大int a[]=new int [1024*1024*1024] ...

  3. 在Python中数据类型转换的注意事项

    在学习Python的过程接触到了数据类型转化这一过程,在实践的过程中我发现了一个小问题,我们在平常的使用中要一定注意 在str型转换成int型的过程中,str内的内容必须是整数不然会报错 如图: 在转 ...

  4. sql server 报错处理

    1.错误:针对程序集 'StoreProc' 的 CREATE ASSEMBLY 失败,因为程序集 'StoreProc' 未获授权,不满足 PERMISSION_SET = UNSAFE.满足以下两 ...

  5. tensoflow模型中提示:ValueError&colon; Variable rnn&sol;basic&lowbar;rnn&lowbar;cell&sol;kernel already exists&comma; disallowed&period; Did you mean to set reuse&equals;True or reuse&equals;tf&period;AUTO&lowbar;REUSE in VarScope&quest; 解决办法

    在利用tensorflow框架进行模型训练的时候,有时我们需要多次训练对结果求均值来得到一个均衡的评测结论.比如训练十次求平均值.但是tf的本质就是图,当变量第一次定义使用后,第二次再使用就是提示: ...

  6. Layer 弹出页面 在点击保存关闭弹出层

    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> ...

  7. CRF&plus;&plus;地名实体识别(特征为词性和词)

    http://x-algo.cn/index.php/2016/02/29/crf-name-entity-recognition/ 类似使用CRF实现分词和词性标注,地域识别也是需要生成相应的tag ...

  8. 代码管理(二)sourcetree 安装与使用

    一 .SourceTree简介 SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端,拥有可视化界面,容易上手操作.同时它也是Mercurial和Subve ...

  9. CookieUtils工具类

    package com.taotao.common.util; import java.io.UnsupportedEncodingException; import java.net.URLDeco ...

  10. NGUI下拉菜单学习UIPopupList

    NGUI下拉栏主要注意2点 1.弹出文字收回去,需要更新主显文字信息,要绑定调用 2.有时候发现弹出来的面板差别很大 看了下代码 会根据父节点取相对位置. 这样位置就可以了,很奇怪的做法..