首页
AngularJS
02：ng-init、ng-repeat和表达式的结合使用

02：ng-init、ng-repeat和表达式的结合使用

作者：田大才子2016-10-2 11:09分类： AngularJS

本文所有文字解释都在代码中以注释的方式存在。

请复制代码到自己喜欢的文本编辑器中观看。

温馨提示如有转载或引用以上内容之必要，敬请将本文链接作为出处标注，谢谢合作！

以下为全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AnjularJs表达式</title>

	<!-- 引入angular.js文件 -->
	<!-- 如果先引入js的话，{{ }}的形式就不会出现闪烁现象 -->
	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>
<body>
	
	<!--
		AngularJS表达式 可以写在写在双大括号内：{{ expression }}，
		也可以写在 ng-bind 属性里面
	-->
	<div ng-app="">
	 	
	 	<!-- 没有初始值的表达式形式 -->
	 	<p>数字相加: {{ 5 + 5 }}</p>
	 	<p>字符串相加: {{ "Tian" + " " + "Qing" }}</p>
		
		<!--
			ng-init 可以在表达式开始前，初始化一些数值
		-->

		<!-- 初始化数字 -->
		<div ng-init="quantity=2;cost=5;">
			<p>总价： {{ quantity * cost }}</p>
		</div>
		
		<!-- 初始化字符串 -->
		<div ng-init="firstName='John';lastName='Doe'">
			<p>姓名： {{ firstName + " " + lastName }}</p>
		</div>
		
		<!-- 初始化对象 -->
		<div ng-init="person={firstName:'John',lastName:'Doe'}">
			<p>姓为 {{ person.lastName }}</p>
		</div>

		<!-- 初始化数组 -->
		<div ng-init="points=[1,15,19,2,40]">
			<p>第三个值为 {{ points[2] }}</p>
		</div>
		
		<!-- 
			ng-repeat 指令会重复一个 HTML 元素 
		-->
		<p>循环对象：</p>
		<ul  ng-init="names=[
							{name:'Jani',country:'Norway'},
							{name:'Hege',country:'Sweden'},
							{name:'Kai',country:'Denmark'}
							]">
		  <li ng-repeat="x in names">
		    {{ x.name + ', ' + x.country }}
		  </li>
		</ul>

	</div>

</body>
</html>

Plugins by ewCEO.com

« 03：module、controller、$scope和ng-model的结合使用 | 01：ng-app、ng-model、ng-bind的作用 »

已有 0/4274 人参与

发表评论：

02：ng-init、ng-repeat和表达式的结合使用

已有 0/4274 人参与

搜索

日历

最新文章

热门文章

随机文章

02：ng-init、ng-repeat和表达式的结合使用

相关文章

已有 0/4274 人参与

搜索

日历

最新文章

热门文章

随机文章