时间:2021-07-01 10:21:17 帮助过:7人阅读
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AngularJS 表达式</title> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <!-- <script src="./angular.min.js"></script> --> </head> <body> <!-- ng-app="" <p>是angularJS的“所有者” * 练习可以空,但项目中一定要赋值,后面所说的模块。 一个特殊的指令,一个HTML文档只出现一次,如出现多次也只有第一个起作用;ng-app可以出现在html文档的任何一个元素上。 ng-init="" 初始化数据 ng-model="name" 输入框的数据绑定给<h1> --> <p ng-app="" ng-init="fruits={apple:'苹果',banana:'香蕉'};exercise=['足球','篮球','登山','滑雪','跑步'];quantity=2;price=5;firstName='诸葛';lastName='孔明'"> <!-- 数据绑定 --> <p>名字 : <input type="text" ng-model="name"></p> <h1>名字:{{ name }}</h1> <!-- 两种方法进行 {{ a+b }} = ng-bind="a+b" --> <!-- 数字 --> <h1>算法:{{quantity-price}}</h1> <!-- -3 --> <p>总价: <span ng-bind="quantity * price"></span></p> <!-- 10 --> <!-- 字符串 --> <p>姓名:{{ firstName + lastName}}</p> <!-- 诸葛孔明 --> <p>姓名:{{ firstName+'&'+lastName}}</p> <!-- 诸葛&孔明 --> <p>姓名:<span ng-bind="firstName+'卧龙'+lastName"></span></p> <!-- 诸葛卧龙孔明 --> <!-- 对象 --> <p>水果:{{ fruits.apple }}</p> <!-- 苹果 --> <p>水果:<span ng-bind="fruits.banana"></span></p> <!-- 香蕉 --> <!-- 数组 --> <p>运动:{{ exercise[3] }}</p> <!-- 滑雪 --> <p>运动:<span ng-bind="exercise[2]"></span></p> <!-- 登山 --> </p> </body> </html>
相关推荐:
AngularJS 表达式的实例详解
JavaScript强化教程——AngularJS 表达式
AngularJS入门教程之AngularJS表达式_AngularJS
以上就是AngularJS表达式实例分享的详细内容,更多请关注Gxl网其它相关文章!