Angular系列之表达式（二）

本篇将介绍angularJS中的表达式的使用以及另外一个angualarJS指令ng-init的使用；

相信在这里，对angular的指令的可能不是很了解，那么什么是angular指令，angular指令又有什么特性，又用在何处？

其实如果在看了angular第一篇文章的基础上，那么应该就很好理解angular指令+$scope作用域(后面会讲,此处就是了解就好了)就类似与MVVM模式中ViewModel,负责业务逻辑层与视图层之间交互的桥梁；$scope就是下达命令的人，那么指令就是执行$scope下达的命令，我们就是$scope与指令相结合，就可以动态的根据业务逻辑对数据操作的改变而去改变页面的显示与动作。

总之：1.angular指令只使用在html中的标签上；2.能够把html标签与js相关联起来；3.指定的形式ng-xxx=""。

ng-init:初始化应用时创建一个变量;而变量是包括字符串，对象，数组等等。

先看运行结果：

运行实例demo：

注意：angular表达式写在双大括号内： {{变量名}}

<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
    <meta charset="UTF-8">
    <title>angular之表达式的使用</title>
</head>
<body>
<!--
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙
AngularJS 表达式不支持条件判断，循环及异常

ng-init 可以定义字符串数组对象等
-->

<!-- 1.数字-->
<div ng-init="pay=2;money=7">
    <p>总支出： {{pay*money}}</p>
</div>

<!--2.字符串-->
<div ng-init="firstName='liu';lastName='qiang'">
    <p>姓名： {{firstName + lastName}}</p>
</div>

<!--3.对象-->
<div ng-init="person={name:'liuqiang',sex:'男',age:23}">
    <p>姓名：{{person.name}}  年龄：{{person.age}}</p>
</div>

<!--4.数组-->
<div ng-init="arr=[0,1,3,8,5,4,9]">
    <p>数组的第三个数：{{arr[3]}}</p>
    <p>数组的第三个数：<span ng-bind="arr[3]"></span></p>
</div>


</body>
</html>
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>

Angular系列之表达式（二）

猜你喜欢