AngularJS 中的表达式是什么？

在本文中，我们将看到 Angular JS 中的表达式，并通过代码示例了解实现它的不同方法。

AngularJS 中的表达式是要被评估的语句，它被放置在双花括号内。评估的结果将准确地返回到定义表达式的位置。它有助于执行数据绑定。数据绑定是指模型和视图组件之间的同步。表达式有助于数据绑定，因为它们将应用程序数据绑定到 HTML。这里需要注意的重要一点是 AngularJS 表达式不能包含正则表达式、循环、条件语句和函数。 AngularJS 中的表达式可以包含字面量、运算符和变量。 AngularJS 表达式可以与字符串和数字等原始类型以及 JavaScript 对象和数组等其他类型一起使用。

AngularJS中有两种写表达式的方法：

• 使用双括号
• 使用ng-bind 指令

我们将探索这两种方法并了解它们的实现。

使用双花括号：双花括号可用于将模型的内容显示到视图组件。无论在双花括号内写什么，都将准确地显示在表达式所在的位置。

句法：

{{expression}}

示例 1 ：此示例描述了表达式。

HTML

  

    Angular JS Expression
    
    

  

    {{100}}
  
    {{100*2}}

  

输出：

示例 2 ：此示例描述了使用双括号的表达式。

HTML

  

    Angular JS Expression
    
    

  

    
        Enter your name:
        
    
    Hello {{name}}

  

说明：在本例中，我们将名称作为输入。然后我们打印了包含用户使用双括号中的表达式输入的名称的消息。

输出：

使用ng-bind 指令： ng-bind 指令可用于将元素的 innerHTML 绑定到模型属性。如果变量或表达式的值发生变化，指定的 HTML 元素的内容也会发生变化。

句法：

 Contents 

示例 3：此示例描述了使用 ng-bind 指令的表达式。

HTML

  

    Angular JS Expression
    
    

  

    
        Enter your name:
        
    
    Hello 
        
    

  

说明：在本例中，我们将名称作为输入。使用ng-model指令，我们可以将输入的值绑定到应用程序数据。然后我们打印了用户使用ng-bind指令输入的名称。

输出：

在表达式中执行操作：

我们还可以在表达式中执行表达式。

示例 4 ：此示例描述了 2 个字符串的连接。

HTML

  

    Angular JS Expression
    
    

  

    
        Enter your first name:
        
        
        Enter your last name:
        
    
    Hello {{firstname+" "+lastname}}

  

输出：

示例 5：在本示例中，我们根据客户输入的产品数量计算要支付的总金额。

HTML

  

    Angular JS Expression
    
    
    
        table {
            border: 1px solid black;
            border-collapse: collapse;
        }
          
        th,
        td {
            padding: 5px;
            border: 1px solid black;
            border-collapse: collapse;
        }
    

  

    
        
            Enter the quantity of 
            items to be bought:
        
        
        
        
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
        ProductPriceQuantityPencil10
                    
                Pen20
                    
                Sharpner15
                    
                Eraser5
                    
                
        Total amount to be paid:
            {{pencil*10+pen*20+sharpner*15+eraser*5}}
        
    
    
        var app = angular.module("myApp", []);
        app.controller("myctrl", function($scope) {
            $scope.pencil = 0;
            $scope.pen = 0;
            $scope.sharpner = 0;
            $scope.eraser = 0;
        });
    

  

说明：在此示例中，显示了一个表格，其中显示了产品名称和价格等详细信息。用户需要输入他想购买的数量并显示要支付的金额。

输出：

注意：为计算要支付的总金额执行的操作在表达式内：

{{ pencil*10 + pen*20 + sharpner*15 + eraser*5 }}

示例 6 ：此示例通过指定数字、字符串、数组、对象来描述 Angular JS 中的表达式。

HTML

  

    Angular JS Expression
    
    

  

    Name of the student: {{student.name}}
    Age of the student: {{student.age}}
    Favourite subject: {{subjects[0]}}
    Least favourite: {{subjects[1]}}
  
    
        var app = angular.module("myApp", []);
        app.controller("myctrl", function($scope) {
            $scope.student = {
                "name": "GeeksforGeeks",
                age: 20
            };
            $scope.subjects = 
                ["English", "Hindi", 
                 "Maths", "SST", "Science"];
        });
    

  

输出：

AngularJS 和 JavaScript 表达式之间有一个相似之处，即两者都可以包含字面量、运算符和变量。

AngularJS 和 Javascript 表达式的比较：

AngularJS Expressions	JavaScript Expressions
These can be written inside HTML.	These cannot be written inside HTML.
These expressions support filters.	These expressions do not support filters.
Conditionals, loops, and exceptions are not supported by them.	Conditionals, loops, and exceptions are supported by them.