angularjs表达式

angularjs表达式主要用于数据绑定
angularjs表达式是写在双大括号内的：{{ }}。
angularjs表达式把数据绑定到html上。
angularjs将在表达式书写的位置“输出”数据。（也就是说{{ }}中就是用来显示输出的数据）。
angularjs中表达式可以包含文字，运算符或定义的函数名，变量等。
在javascript中也存在着表达式，那么angularjs的表达式与之有什么异同？
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。
angularjs（向表达式中传入数字）
例如：

<div ng-app="myApp">
	<div ng-controller="myCtrl">
		<p>{{num1 + num2}}</p>
	</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
	$scope.num1 = 2;
	$scope.num2 = 3;
});
</script>

实例解析：我们在<div></div>中创建了名为myApp的应用，那么这个应用的范围就在这个<div></div>中，另外我们在这个应用中创建了一个名为myCtrl的控制器，下面所有的js部分操作的范围都将在这个控制器中进行。我们为num1属性赋值为2，为num2属性赋值为3，运行上面的代码得到的结果为5。
angularjs（向表达式中传入字符串）
例如：

<div ng-app="myApp">
	<div ng-controller="myCtrl">
		姓名：<p>{{firstName + " " + lastName}}</p>
	</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
	$scope.firstName = "zhang";
	$scope.lastName = "shan";
});
</script>

我们在控制器myCtrl中定义了属性firstName的值为“zhang”，属性lastName的值为“shan”并传入了视图层的表达式{{ }}中。
angularjs（向表达式中传入字符串）
例如：

<div ng-app="myApp">
	<div ng-controller="myCtrl">
		<p>{{person.firstName}}</p>
	</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
	$scope.person = {
		firstName:'zhang',lastName:'shan'		
	}
});
</script>

我们在控制器myCtrl中为person创建了键值对 irstName:'zhang',lastName:'shan'这样表达式中的person就可以获取到属性firstName的值
angularjs（向表达式传入数组）
例如：

<div ng-app="myApp">
	<div ng-controller="myCtrl">
		<p>{{nums[2]}}</p>
	</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
	$scope.nums = [0,1,2,3,4,5];
});
</script>

我们在控制器myCtrl中为创建了nums数组，并传入到表达式{{ }}中，注意：在表达式中获取数组中的值是，跟javascript一样下标也是从0开始。
扩展：
1、ng-bind指令
ng-bind指令告诉angularjs使用给定的变量表达式的值来替换html元素的内容，如果给定的变量或表达式修改了，指定替换的html元素也会修改。
之所以在这里提出ng-bind指令，是因为ng-bind指令跟表达式{{ }}有着很相似的作用下面我们举例说明一下。
例如

<div ng-app="myApp">
	<div ng-controller="myCtrl">
		数量：<input type="number" ng-model="quantity">
		单价：<input type="number" ng-model="price"><br>
		总价：<span>{{quantity * price}}</span>
	</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
	$scope.quantity = 2;
	$scope.price = 5;
});
</script>

上面的代码可以写成下面这样：

<div ng-app="myApp">
	<div ng-controller="myCtrl">
		数量：<input type="number" ng-model="quantity">
		单价：<input type="number" ng-model="price"><br>
		总价：<span ng-bind="quantity * price"></span>
	</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
	$scope.quantity = 2;
	$scope.price = 5;
});
</script>

注意：
这里我们使用
总价：<span ng-bind="quantity * price"></span>
代替
总价：<span>{{quantity * price}}</span>
但是结果却完全没有改变，所以ng-bind与表达式{{ }}之间是有异曲同工之妙的。
上面的全部实例中的表达式{{}}均可以用ng-bind指令来代替。
2、ng-init指令
ng-init指令主要是在我们初始化应用时创建一个变量并为其赋值：
例如：
传入字符串：

<div ng-app="" ng-init="name='zhangsan'">
	姓名：{{name}}
</div>

结果为：zhangsan
传入数组：

<div ng-app="" ng-init="nums=[1,2,3,4,5]">
	{{nums[2]}}
</div>

结果为：3
传入对象：

<div ng-app="" ng-init="person={firstName:'zhangsan',lastName:'lisi'}">
	{{person.firstName}}
</div>

结果为：zhangsan
注意：
1、ng-app这个指令只能在html文档中出现一次，如果出现多次，那么只有第一个是起作用的。
2、ng-app指令可以在写在html文档中的任何一个元素上，例如boday标签。
如有理解不当之处，欢迎各位老铁留言指正。谢谢！！！！