您的位置：首页 > Web前端 > AngularJS

AngularJs 基础教程（二）数据的绑定与表达式

2016-07-18 18:50 846 查看

本文为H5EDU机构官方的HTML5培训教程，AngularJs
基础教程，AngularJs
教程
将带领大家对angularjs有一个基础的了解
这一节我们将介绍数据的绑定以及表达式
数据初始化，在一个angularjs应用中我们可以用ng-init指令初始化数据

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../angular.min.js"></script>
</head>
<body>
<div ng-app ng-init="cost1=3;cost2=4">
<p>总价值:<span ng-bind="cost1*cost2"></span></p>

</div>
</body>
</html>

ng-init指令用于初始化数据，数据类型和js相同，（num，string，array,obj...）但是这种方法我们并不常用，之后会在控制器里介绍。

<div ng-app ng-init="str1='欢迎来到';str2='www.h5edu.cn'">--初始化字符串
<div ng-app ng-init="person={str1:'感觉很干净',str2:'sfsf'}">--初始化对象
<div ng-app ng-init="points=[1,14,13,12,23]">--初始化数组

数据绑定
angularjs提供两种数据绑定的方式一种{{绑定数据}}，一种通过ng-bind绑定数据

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../angular.min.js"></script>
</head>
<body>
<div ng-app ng-init="points=[1,14,13,12,23]">
<p>{{ points[1] }}</p>//通过{{}}绑定数据
<p><span ng-bind="points[2]"></span></p>//通过ng-bind绑定数据
</div>

</body>
</html>

{{}}绑定数据，在哪里需要在哪里绑定
ng-bind，将数据绑定到元素内部类似于innerhtml
在{{}}和ng-bind我们可以直接进行js运算比如{{}}

<div ng-app ng-init="str1='欢迎来到';str2='www.h5edu.cn'">
<h3>表达式</h3>
<p>{{str1+""+str2}}</p>
<h3>ng-bind</h3>
<p ng-bind="str1+''+str2"></p>
</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angularjs js javascript

相关文章推荐

新的分享

章节导航

AngularJs 基础教程 （二） 数据的绑定与表达式

AngularJs 基础教程（二）数据的绑定与表达式