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

发布时间：2020-12-17 10:03:31 所属栏目：安全来源：网络整理

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

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