當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

AngularJS中的表达式

發布時間：2023/12/1 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 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

總結

以上是生活随笔為你收集整理的AngularJS中的表达式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。