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

本文为 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,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 基础教程 （二） 数据的绑定与表达式

猜你在找的Angularjs相关文章

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