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

輸出量

翻譯自: https://www.includehelp.com/angular-js/expressions-in-angularjs.aspx

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/377433.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/377433.shtml
英文地址，請注明出處：http://en.pswp.cn/news/377433.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！