AngularJS的基础元素应用

<!doctype html>
<!-- 标记ng-app告诉AngularJS处理整个HTML页并引导应用 --><html ng-app><head><meta charset="UTF-8"><script src="http://code.angularjs.org/angular-1.0.1.min.js"></script><script src="js/controllers.js"></script><!-- 当绑定两个花括号在title元素上可以实现我们的目标，但是你或许发现了，页面正加载的时候它们已经显示给用户看了。一个更好的解决方案是使用ngBind或者ngBindTemplate指令，它们在页面加载时对用户是不可见的 --><title ng-bind-template="Google Phone Gallery: {{'ha ha'}}">Google Phone Gallery</title></head><body ng-controller="PhoneListCtrl"><!-- 双向绑定 ng-model="yourname" -->Your name: <input type="text" ng-model="yourname" placeholder="World"><hr>Hello {{yourname || 'World'}}!<hr><!-- 从控制器取出数据，迭代显示 --><!-- PhoneListCtrl控制器里面的方法 -->Search: <input ng-model="query"><!-- 这里的 orderProp会取出控制器里面的默认 orderProp="age" -->Sort by:<select ng-model="orderProp"><option value="name">name order</option><option value="age">age order</option></select><ul><!-- 控制器中 PhoneListCtrl方法定义的变量 phones迭代   ng-repeat迭代元素--><!-- filter函数使用query的值来创建一个只包含匹配query记录的新数组 --><!-- orderBy排序绑定到上面的 orderProp元素 --><li ng-repeat="phone in phones | filter:query | orderBy:orderProp">{{phone.name}}<p>{{phone.snippet}}</p></li><hr><!-- 下面是一些联系 --><p>Total number of phones: {{phones.length}}</p></ul><hr><div ng-controller="HelloWordCtrl">测试控制器: {{hello}}</div><hr><table><tr><th>row number</th></tr><tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr></table></body>
</html>

转载于:https://www.cnblogs.com/shaoshao/p/6018811.html

AngularJS的基础元素应用相关推荐

《Ansible权威指南》一第2章 Ansible基础元素介绍
本节书摘来自华章出版社<Ansible权威指南 >一书中的第2章,第2.1节,李松涛魏巍甘捷著更多章节内容可以访问云栖社区"华章计算机"公众号查看. 第2章 ...
【转】探索基础元素---基于WebGL的H5 3D游戏引擎BabylonJS
原文地址:https://blog.csdn.net/AceWay/article/details/51472823 介绍在本教程, 我们将学习如何使用Babylon.js创建基础元素, 比如盒子, ...
BPMN基础元素及任务类型
01 BPMN定义 BPMN(Business Process Modeling Notation,即业务流程建模符号),是一种流程建模的通用和标准语言,用来绘制业务流程图,以便更好地让各部门之间理解 ...
Web全栈~01.HTML基础元素
Web基本笔记~01.HTML基础元素一 : 标题标题(Heading)是通过 < h1 >- < h6 > 标签进行定义的. < h1 > 定义最大的标题. ...
游戏场景设计思维：至关重要的基础元素
关于讲师:卢东彪,腾讯互动娱乐魔方工作室群高级游戏美术师. 导语在本期分享中,我们进入场景思维的中期构图阶段,聚焦对推进画面风格至关重要的场景基础元素刻画,并细化讲解实际技巧,进一步探讨风格化在场景 ...
Qt_QML基础元素对象
基本元素(Basic Elements) 元素可以被分为可视化元素与非可视化元素.一个可视化元素(例如矩形框Rectangle)有着几何形状并且可以在屏幕上显示. 一个非可视化元素(例如计时器Time ...
angularjs的基础知识
一. MVC框架(视图模型) MVC是后台开发中表现层中的架构模式: M --- model 模型(就是输入或传出的数据) V --- view 视图(就是页面中的各种标签) C --- contro ...
【前端就业课第一阶段】HTML5 零基础到实战（五）基础元素
注意:手机(APP)打开,内容显示更佳,不会的私聊博主即可(知识点结构参考<HTML5入门到精通>) 想要拿代码或加入学习计划(** 博主会监督你并且教你写文章 **)的拉到最下面(PC端 ...
python eval函数_Python基础元素语法总结
一.程序的格式框架 1.缩进缩进是指每行语句前的空白区域,用来表示Python程序间的包含和层次关系. 一般语句不需要缩进,顶行书写且不留空白. 当表示分支.循环.函数.类等含义,在if,while ...
Cypress 基础 - 元素的定位
Cypress basics: Selecting elements Selecting a single element 语法: cy.get('.selector') 首先,让我们看看 .sele ...

AngularJS的基础元素应用

AngularJS的基础元素应用相关推荐

最新文章

热门文章