AngularJS表达式用法代码示例

2021年4月1日17:59:19 发表评论 931 次浏览

AngularJS中的表达式用于将应用数据绑定到HTML。表达式由Angular解析,结果会被返回到写表达式的地方。AngularJS中的表达式是用双花括号写的:{{expression}}。它们的行为类似于ng-bind指令:ng-bind= " expression "

语法如下:

{{ expression }}

例子:这个例子显示了我们在ng-init指令中输入的名称。

<!DOCTYPE html>
<html>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/
     angular.min.js"></script>
     <head>
         <title>AngularJS Introduction</title>
     </head>
     <body style = "text-align:center">
             <h2 style = "color:green">AngularJS Expressions</h2>
             <div ng-app = "" ng-init = "name='lsbin'">
             <p> {{ name }} is a portal for geeks.</p>
             </div>
     </body>
</html>

输出如下:

表达式

范例2:此示例显示了我们在ng-init指令中提供的对象的内容。

<html>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/
     angular.min.js"></script>
     <head>
         <title>AngularJS Introduction</title>
     </head>
     <body>
         <h2 style = "color:green">AngularJS Expressions</h2>
         <div ng-app = "" ng-init="sort={one:'quick sort', two:'merge sort', three:'bubble
             sort'}">
             <p> Sorting Algorithms:
             <ul>
                 <li>{{ sort.one }}</li>
                 <li>{{ sort.two }}</li>
                 <li>{{ sort.three }}</li>
             </ul>
         </div>
     </body>
</html>

输出如下:

表达式

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: