AngularJS之基本指令(init、repeat)

	<h3>ng-init初始化变量</h3>
	<div ng-init="name=‘aurora‘;age=‘18‘">
		<p ng-bind="name+‘,‘+age"></p>
		<p>{{name+‘,‘+age}}</p>
	    <p ng-bind="name"></p>
	    <p ng-bind="age"></p>
	</div>
	<h3>ng-init初始化对象</h3>
	<div ng-init="hero={name:‘aurora‘,role:‘sup‘,line:‘不管刮风还是下雨,太阳照常升起‘}">
		<p ng-bind="hero.name+‘,‘+hero.role+‘,‘+hero.line"></p>
	    <p ng-bind="hero.name"></p>
	    <p ng-bind="hero.role"></p>
	    <p ng-bind="hero.line"></p>
	</div>
	<h3>ng-init初始化数组</h3>
	<div ng-init="heros=[‘曙光女神‘,‘堕落天使‘,‘魂锁典狱长‘]">
		<p ng-bind="heros[0]+‘,‘+heros[1]+‘,‘+heros[2]"></p>
	    <p ng-bind="heros[0]"></p>
	    <p ng-bind="heros[1]"></p>
	    <p ng-bind="heros[2]"></p>
	</div>

	<h3>ng-controller控制器</h3>
	<div ng-controller="contr-2">
	    First Name: <input type="text" ng-model="firstName">
	    Last Name: <input type="text" ng-model="lastName">
	    Full Name : <span>{{firstName + "," + lastName}}</span>
	    Full Name : <span ng-bind="firstName + ‘,‘ + lastName"></span>
	</div>

	<h3>ng-repeat遍历无重复集合</h3>
	<div ng-init="names=[1,2,3]">
	  <ul>
	    <li ng-repeat="x in names">
	      {{x}}
	    </li>
	  </ul>
	</div>
	<h3>ng-repeat遍历重复集合</h3>
	<div ng-init="number=[1,2,2,3]">
	  <ul>
	    <li ng-repeat="x in number track by $index">
	      {{x}}
	    </li>
	  </ul>
	</div>
	<h3>ng-repeat遍历对象</h3>
	<div ng-controller="contr-3">
		  <ul>
		    <li ng-repeat="(key,value) in object track by $index">
		      {{key+":"+value}}
		    </li>
		  </ul>
	</div>
	<h3>ng-repeat遍历对象(按原有顺序)</h3>
	<div ng-controller="contr-4">
		  <ul ng-repeat="obj in objs ">
		    <li ng-repeat="(key,value) in obj ">
		      {{key+":"+value}}
		    </li>
		  </ul>
	</div>
	<h3>ng-repeat遍历对象(属性详解)</h3>
	<table ng-controller="contr-5">
		<tr ng-repeat="(key, value) in objs ">
			<td>学号:
				<span ng-bind="$index"></span>
			</td>
			<td>
				<span ng-bind="key"></span>:
				<span ng-bind="value"></span>
			</td>
			<td>是否为奇数?
				<span ng-bind="$odd"></span>
			</td>
			<td>是否为偶数?
				<span ng-bind="$even"></span>
			</td>
			<td>排行是老大?
				<span ng-bind="$first"></span>
			</td>
			<td>排行最小?
				<span ng-bind="$last"></span>
			</td>
			<td>排行中间?
				<span ng-bind="$middle"></span>
			</td>
		</tr>
	</table>
	<h3>ng-repeat start/end</h3>
	<div ng-controller="contr-6">
		<div ng-repeat-start="(key,value) in objs">
			<p>学号:
				<span ng-bind="$index"></span>
			</p>
			<p>
				<span ng-bind="key"></span>:
				<span ng-bind="value"></span>
			</p>
		</div>
		<div ng-repeat-end></div>
	</div>

效果:http://runjs.cn/detail/l16ogqjb

时间: 2024-10-05 05:58:49

AngularJS之基本指令(init、repeat)的相关文章

带你走近AngularJS - 创建自定义指令

为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能,并且AngularJS 是目前唯一提供Web应用可复用能力的框架. 目前有很多JavaScript 产品提供插件给Web开发人员.例如, Bootstrap 就是当前比较流行的提供样式和JavaScript插件的前端开发工具包.但是开发人员在使用Booostrap中的插件时, 必须切换到JavaScript 模式来写 jQuery

AngularJS 学习笔记 -- 指令(Directive)

AngularJS 指令学习笔记 AngularJS怎样处理指令其实是依赖于指令定义时返回的对象属性的,所以要想深入理解如何定义一个指令,首相需要理解指令定义时各个参数的含义. 完整的AngularJS指令参数 angular.module('app', []) .directive('demoDirective', function (){ // 依据官方规范,指令的定义时应该严格遵循驼峰式命名规则,使用时采用'-'连接单词 return { restrict : String in ['E'

AngularJS创建新指令

指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令. AngularJS原有的指令 ng-init   初始化指令 ng-if   条件指定 ng-repeat   循环指令 下面为大家介绍下创建新指令的方法 加入html代码 <div ng-app="myapp"> <hello-world></hello-world> <div hello-

[转]你知道用AngularJs怎么定义指令吗?--很详细

前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angular.module("app",[]).directive("directiveName",function(){ return{ //通过设置项来定义 }; }) 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明指令

关于angularjs的ng-repeat指令

(如果有说的不对,欢迎指教,更欢迎大家一起交流.) 关于angularjs的ng-repeat指令,想必每个学习angularjs的初学者都很有映像.那我也总结一下我使用ng-repeat的时候经验,ng-repeat他只能循环出数组和对象,所以当在项目中,如果碰到ng-repeat循环不出数据的时候,不妨查看一下数据源是否为数组等 . 其次说一下循环内嵌,循环内嵌就是ng-repeat某个json数组某个数据时候,还需要循环其子数据 例如json格式如下: 我们需要循环出name和city里面

AngularJS之ng-if指令

1.问题背景 AngularJS利用ng-if指令来判断对象元素是否为空 2.实现源码 <!DOCTYPE html> <html ng-app="ifApp"> <head> <meta charset="UTF-8"> <title>AngularJS之ng-if指令</title> <script src="http://apps.bdimg.com/libs/angula

AngularJS之ng-controller指令

1.问题背景 ng-controller:该指令是用于AngularJS应用添加控制器 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之ng-controller指令</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6

【前端vue开发】Hbuilder配置Avalon、AngularJS、Vue指令提示

偶尔也会研究一下前端内容,因为Hbuilder是基于eclipse开发的,所以用起来倍感亲切啊,而且在我尝试使用的几款前端开发工具中,Hbuilder的表现也是相当出色地,可以访问Huilder官网下载体验一下. 言归正传,当前前端的开发中,MVVM框架非常流行,比较典型的如:AngularJS.VueJS等,这部分框架基本都有一个指令的概念,在工具中配置相关的提示,可以极大地方便的我们的开发,下面就来介绍一下如何在Hbuilder中进行配置. 依次点击:工具 -> 扩展代码块 -> 自定义h

Angularjs[25] - 自定义指令(1)(restrict, template, replace)

自定义指令: module.directive(name,directiveFactory) @see $compileProvider.directive() ??  不要使用 ng 为指令,若指令名为 xxx-yyy,在设置指令名时应为 xxxYyy 即驼峰命名法. restrict: 可以任意组合四种风格,如果忽略 restrict,默认为A. 字母 风格 示例 E 元素 <my-dir></my-dir> C 样式类 <span class="my-dir: