angularjs表达式 angularjs表达式|AngularJS教程

本文概述

AngularJS表达式示例
AngularJS数字
AngularJS字符串
AngularJS对象
AngularJS数组
AngularJS表达式和JavaScript表达式之间的区别
AngularJS表达式和JavaScript表达式之间的相似性

【angularjs表达式】在AngularJS中，表达式用于将应用程序数据绑定到HTML。 AngularJS解析表达式，并精确地将表达式返回的位置返回结果。
表达式写在双括号{{expression}}中。它们也可以写在指令中：

ng-bind="expression".

AnularJS表达式与JavaScript表达式非常相似。它们可以包含文字，运算符和变量。例如：

{{ 5 + 5 }} or {{ firstName + " " + lastName }}

AngularJS表达式示例

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < div ng-app> < p>A simple expression example: {{ 5 + 5 }}< /p> < /div> < /body> < /html>

注意：如果删除指令“ ng-app”，则HTML将显示该表达式而不解决它。
请参阅以下示例：

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < p>If you remove the directive "ng-app", HTML will display the expression without solving it.< /p> < div> < p>A simple expression example:{{ 5 + 5 }}< /p> < /div> < /body> < /html>

你也可以在任何地方编写表达式，AngularJS将解析该表达式并返回结果。
让我们举一个例子来改变输入框的颜色。
请参阅以下示例：

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < p>Change the value of the input field:< /p> < div ng-app="" ng-init="myCol='pink'"> < input style="background-color:{{myCol}}" ng-model="myCol" value="http://www.srcmini.com/{{myCol}}"> < /div> < p>AngularJS resolves the expression and returns the result.< /p> < p>The background color of the input box will be whatever you write in the input field.< /p> < /body> < /html>

AngularJS数字AngularJS数字类似于JavaScript数字。

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < div ng-app="" ng-init="quantity=5; cost=5"> < p>Total in dollar: {{ quantity * cost }}< /p> < /div> < /body> < /html>

我们可以通过ng-bind使用相同的示例：
请参阅以下示例：

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < div ng-app="" ng-init="quantity=5; cost=5"> < p>Total in dollar: < span ng-bind="quantity * cost">< /span>< /p> < /div> < /body> < /html>

AngularJS字符串

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < div ng-app="" ng-init="firstName='Sonoo'; lastName='Jaiswal'"> < p>My full name is: {{ firstName + " " + lastName }}< /p> < /div> < /body> < /html>

与ng-bind相同的示例：

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < div ng-app="" ng-init="firstName='Sonoo'; lastName='Jaiswal'"> < p>My full name is: < span ng-bind="firstName + ' ' + lastName">< /span>< /p> < /div> < /body> < /html>

AngularJS对象

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < div ng-app="" ng-init="person={firstName:'Sonoo', lastName:'Jaiswal'}"> < p>My name is {{ person.firstName }}< /p> < /div> < /body> < /html>

与ng-bind相同的示例：

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < div ng-app="" ng-init="person={firstName:'Sonoo', lastName:'Jaiswal'}"> < p>The name is < span ng-bind="person.firstName">< /span>< /p> < /div> < /body> < /html>

AngularJS数组

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < div ng-app="" ng-init="points=[1, 15, 19, 2, 40]"> < p>The first result is {{ points[0] }}< /p> < /div> < /body> < /html>

与ng-bind相同的示例：

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < div ng-app="" ng-init="points=[1, 15, 19, 2, 40]"> < p>The first result is < span ng-bind="points[0]">< /span>< /p> < /div> < /body> < /html>

AngularJS表达式和JavaScript表达式之间的区别