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>
AngularJS的基础元素应用的更多相关文章
- AngularJS指令基础（一）
AngularJS指令基础(一) 1.什么是指令:粗暴的理解就是,自定义HTML标签.专业理解是指,angularJS扩展具有自定义功能的HTML元素的途径. 2.什么时候用到指令:需求是变化的.多样 ...
- Ansible的基础元素和YAML介绍
本节内容: YAML Ansible常用的数据类型 Ansible基础元素 一.YAML 1. YAML介绍 YAML是一个可读性高的用来表达资料序列的格式.YAML参考了其他多种语言,包括:XML. ...
- ansible入门三（Ansible的基础元素和YAML介绍）
Ansible的基础元素和YAML介绍 本节内容: YAML Ansible常用的数据类型 Ansible基础元素 一.YAML 1. YAML介绍 YAML是一个可读性高的用来表达资料序列的格式 ...
- 『心善渊』Selenium3.0基础 — 4、Selenium基础元素定位详解
目录 1.什么是元素定位 2.Selenium元素定位常用API (1)By_id 定位 (2)by_name 定位 (3)by_class_name 定位 (4)by_tag_name 定位 (5) ...
- AngularJS语法基础及数据绑定——详解各种数据绑定指令、属性应用
AngularJS简单易学,但是功能强大.特别是在构建单页面应用方面效果显著.而 数据绑定 可以说是他被广泛使用的最主要的优点.他舍弃了对DOM的操作方式,一切都由AngularJS来自动更新视图,我 ...
- 提高前端开发效率必备AngularJS （基础）
简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...
- AngularJS入门基础PPT（附下载链接）
学习了Angularjs有段时间,自己写了一个PPT,个人认为总结的非常全面,对于入门基础够了. 大致模块有:Angularjs简单介绍,Angularjs特性,hello world,Control ...
- AngularJS实用基础知识---入门必备
前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. ...
- AngularJS入门基础——作用域
作用域$scope是构成AngularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它是非常重要的. $scope对像是定义应用业务逻辑,控制器方法和视图属性的地方.作用域是视图和控制器之间的 ...
随机推荐
- SQL Server 2012 清理日志 截断日志的方法
MEDIA数据库名 ALTER DATABASE MEDIA SET RECOVERY SIMPLE WITH NO_WAIT ALTER DATABASE MEDIA SET RECOVERY SI ...
- 利用javascript跨域访问cookie之广告推广
在上一篇<说一说javascript跨域和jsonp>中,利用JSONP进行了跨域的数据访问,利用JS本身的跨域能力在远端生成HTML结构的方式完成了一个小广告. 在实际应用中, 跨域使用 ...
- Unity 3D json嵌套使用以及多种类型匹配
我们控制端要发送很多命令给终端设备,其中有速度,方向,开关门,开关灯....方法千万种,我只取一瓢.我还小,不知道其他人是怎么写的.我喜欢把有规律的东西放在一起写!为了我的强迫症! using Uni ...
- App内测神器之蒲公英
一.前言部分 没使用蒲公英之前一直采用非常傻B的方式给公司App做内部测试,要么发个测试包让公司测试人员用iTUnes 自己安装 要么苦逼的一个个在我Xcode上直接安装测试包,操作起来又麻烦又苦逼, ...
- Jquery元素选取、常用方法
一:常用的选择器:(李昌辉) 基本选择器 $("#myDiv") //匹配唯一的具有此id值的元素 $("div") //匹配指定名称的所有元素 $(" ...
- 基于JQuery的获取鼠标进入和离开容器方向的实现
做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. <!DOCT ...
- 解决motools和jquery之间的冲突
在同一个页面需要同时使用motools和jquery,对于$,发生了冲突,以下是解决的办法. <head> <script src="./Scripts/lib/jquer ...
- 后端Java工程师常用JavaScript_DOM
JavaScript [1]事件 ①用户操作网页或者浏览器所发生的交互行为称为事件.比如:点击按钮,最小化窗口,修改文本框内容等. ②JS为我们定义许多浏览器中的事件.比如:单击(onclick).双 ...
- arcgis api for js入门开发系列三地图工具栏(含源代码)
上一篇实现了demo的地图加载展示,在上篇实现的基础上,新增了地图工具栏以及通用地图控件功能,比如地图框选缩放.地图漫游.清空.量算工具.地图导航控件.地图比例尺控件.地图鹰眼图等等,总共分为5个部分 ...
- iOS网络2——NSURLSession使用详解
原文在此 一.整体介绍 NSURLSession在2013年随着iOS7的发布一起面世,苹果对它的定位是作为NSURLConnection的替代者,然后逐步将NSURLConnection退出历史舞台 ...