AngularJs 表达式
AngularJs 表达式写在双大括号内:{{expression}}
AngularJs 表达式把数据绑定到HTML,这与ng-bind有异曲同工之妙。
AngularJs 将在表达式书写的位置输出数据。
AngularJs 表达式 很想javascript表达式:它们可以包含文字、运算符和变量。
eg:{{5 + 5}}或{{firstName + " " + lastName}}
<div ng-app = "angu" ng-controller="myCtro"> <input type="text" ng-model = "firstName"> <input type="text" ng-model = "lastName"> <span ng-bind = "name"></span> <p>表达式:{{firstName + "5" + lastName}}</p> </div> <script> var app = angular.module("angu",[]); app.controller("myCtro",function($scope){ }) </script>
AngularJs 数字:
<div ng-app = "angu" ng-controller="myCtro" ng-init="quantity=2;price=5"> <p>总价:{{quantity * price}}</p> <!--总价:10--> </div> <script> var app = angular.module("angu",[]); app.controller("myCtro",function($scope){ }) </script>
使用ng-bind的相同实例:
<div ng-app = "angu" ng-controller="myCtro" ng-init="quantity=2;price=5"> <p> 总价:<span ng-bind="quantity * price"></span> </p> <!--总价:10--> </div> <script> var app = angular.module("angu",[]); app.controller("myCtro",function($scope){ }) </script>
AngularJs 字符串:
<div ng-app = "angu" ng-controller="myCtro" ng-init="firstName='John';lastName='Don'"> <p> 姓名:{{firstName +" "+ lastName}} </p> </div> <script> var app = angular.module("angu",[]); app.controller("myCtro",function($scope){ }) </script>
使用ng-bind的相同实例:
<div ng-app = "angu" ng-controller="myCtro" ng-init="firstName='John';lastName='Don'"> <p> 姓名:<span ng-bind="firstName +' '+ lastName"></span> </p> </div> <script> var app = angular.module("angu",[]); app.controller("myCtro",function($scope){ }) </script>
AngularJs 对象:
<div ng-app = "angu" ng-controller="myCtro" ng-init="person={firstName:'John',lastName:'Don'}"> <p> 姓名:{{person.firstName +' '+ person.lastName}} </p> </div> <script> var app = angular.module("angu",[]); app.controller("myCtro",function($scope){ }) </script>
使用ng-bind的相同实例:
<div ng-app = "angu" ng-controller="myCtro" ng-init="person={firstName:'John',lastName:'Don'}"> <p> 姓名:<span ng-bind="person.firstName +' '+ person.lastName"></span> </p> </div> <script> var app = angular.module("angu",[]); app.controller("myCtro",function($scope){ }) </script>
AngularJs 数组:
<div ng-app = "angu" ng-controller="myCtro" ng-init="person=['sing','dance','draw']"> <p> 爱好:{{person[2]}} </p> </div> <script> var app = angular.module("angu",[]); app.controller("myCtro",function($scope){ }) </script>
使用ng-bind的相同实例:
<div ng-app = "angu" ng-controller="myCtro" ng-init="person=person=['sing','dance','draw']"> <p> 爱好:<span ng-bind="person[2]"></span> </p> </div> <script> var app = angular.module("angu",[]); app.controller("myCtro",function($scope){ }) </script>
AngularJs 表达式与Javascript表达式
类似于javascript表达式,AngularJs表达式可以包含字母,操作符,变量。
与Javascript 表达式不同,AngularJs表达式可以写在HTML中。
与Javascript 表达式不同,AngularJs表达式不支持条件判断,循环,异常。
与Javascript 表达式不同,AngularJs表达式支持过滤器。