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

最新推荐文章于 2020-07-11 20:25:21 发布

方长君

最新推荐文章于 2020-07-11 20:25:21 发布

阅读量517

点赞数

分类专栏：入门案例学习笔记入门基础文章标签： angularjs js javascript

本文链接：https://blog.csdn.net/hjjxiaoxiaobai/article/details/51944500

版权

学习笔记入门基础同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

入门案例

13 篇文章 0 订阅

订阅专栏

本文为 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>

方长君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs 基础教程（二）数据的绑定与表达式

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

扫一扫