AngularJS中的表达式

AngularJS表达式 (AngularJS Expressions)

In AngularJS, expressions are solved to give a result. It outputs the result of the expression in the html element that called it. Expressions in AngularJS contain literals, constants, operators and variables with resolve to give desired output.

在AngularJS中， 表达式被求解以给出结果。它在调用它的html元素中输出表达式的结果。 AngularJS中的表达式包含文字，常量，运算符和变量，带有可提供所需输出的resolve。

Example: Angular Expression using Google CDN

示例：使用Google CDN的角度表达

<!DOCTYPE html>
<html ng-app>
<head>
<title>Angular Js</title>
<script src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.7.2/angular.min.js">
</script>
</head>
<body>
<h2>Using Angular Js : Google CDN </h2>
<hr />
<div>
{{12+15}}
</div>
</body>
</html>

Output

输出量

Code explanation:

代码说明：

The above code evaluates an expression in AngularJS. Using the ng-app in the html tag. This makes the whole page the owner of Angular i.e. code can be called from anywhere.

上面的代码评估AngularJS中的表达式 。在html标签中使用ng-app 。这使得整个页面成为Angular的所有者，即可以从任何地方调用代码。

AngularJS中的表达式类型 (Types of expressions in AngularJS)

Expressions in AngularJS are based on the variables and literals used in the expressions,

AngularJS中的表达式基于表达式中使用的变量和文字，

1)AngularJS数字表达式 (1) AngularJS Number Expressions )

Number can also be used in expressions. Number expressions in angular are defined and used as in the below code,

数字也可以在表达式中使用。定义和使用角度的数字表达式，如以下代码所示，

Example:

例：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<h1> Percentage Calculator </h1>
<form>
Marks Obtained :
<input type="number" ng-model="marksobtained"> Total Marks :
<input type="number" ng-model="totalmarks">
</form>
<h1>Percentage = {{(marksobtained*100)/totalmarks}}</h1>
</div>
<p>On putting the marks Obtained and total marks the percetage is given as output.</p>
</body>
</html>

Output

输出量

The above code takes input using form's input tag as angular variable and the does the calculations. Then prints the percentage to the <h1> tag.

上面的代码使用表单的输入标签作为角度变量来接受输入，然后进行计算。然后将百分比打印到<h1>标签。

2)AngularJS字符串表达式 (2) AngularJS String Expressions )

An expression in AngularJS can concatenate two strings to get an output string. String expressions in angular are defined and used as in the below code,

AngularJS中的表达式可以连接两个字符串以获取输出字符串。如下所示，定义并使用了angular字符串表达式，

Example:

例：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<h1>Hello! </h1>
<form>
First Name :
<input type="text" ng-model="firstName"> Last Name :
<input type="text" ng-model="lastName">
</form>
<h1>Hello = {{firstName + lastName }} !</h1>
</div>
<p>On putting the marks Obtained and total marks the percetage is given as output.</p>
</body>
</html>

Output

输出量

3)AngularJS数组表达式 (3) AngularJS array Expressions)

An expression in AngularJS can operate on arrays also. Array expressions in angular are defined and used as in the below code,

AngularJS中的表达式也可以对数组进行操作。按以下代码定义和使用角度数组表达式：

Example:

例：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/AngularJS/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="array = [10, 20, 30, 40, 50] ">
<p>The third result is {{ array[1] }}</p>
</div>
</body>
</html>

Output

输出量