srcmini本文概述
- AngularJS表达式示例
- AngularJS数字
- AngularJS字符串
- AngularJS对象
- AngularJS数组
- AngularJS表达式和JavaScript表达式之间的区别
- AngularJS表达式和JavaScript表达式之间的相似性
在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="{{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表达式之间的区别
- AngularJS表达式可以用HTML编写，而JavaScript表达式则不能。
- AngularJS表达式支持过滤器，而JavaScript表达式则不支持。
- AngularJS表达式不支持条件，循环和异常，而JavaScript表达式则支持。
AngularJS表达式和JavaScript表达式之间的相似性
- AngularJS表达式和JavaScript表达式都可以包含文字，运算符和变量。
评论前必须登录！
注册