angular.js的简单使用

2025-04-21 05:00:39

1、<body> <div> <p>数字砜实蛰斓: {{ 5 + 5 }}</p&爿讥旌护gt; </div> <div ng-app="" ng-init="quantity=1;cost=5"> <p>数字乘积： {{ quantity * cost }}</p> <p>数字使用： <span ng-bind="quantity * cost"></span></p> </div> <div ng-app="" ng-init="quantity1=1;cost1=5"> <p>在这里是没有办法正常使用的，必须在ng-app属性包含的程序里面，ng-app用于声明程序为angular程序</p> </div> </body>

2、<body> <div ng-app="" ng-init="name='zhangsan';de='好人'"> <p>字符串拼接： {{ name + " " + de }}</p> <p>字符串拼接： <span ng-bind="name+''+de"></span></p>

3、<div ng-app="" ng-init="person={name:'zhangsan',age:26}"><p>姓名： {{ person.name }}<br>年龄：{{person.age}}</p></div>

4、<div ng-init="arr = [1,2,3,4,5]"><p>数组的第二个元素{{arr[1]}}</p><p>数组的第二个元素<span ng-bind="arr[1]"></span></p></div></div></body>

5、实现内容输入下面实时展示输入的内容<div ng-app="" ng-init=""> <p>在下面输入框输入内容</p> <p>姓名：<input type="text" ng-model="name"></p> <p>你输入的为： {{ name }}</p> </div>

6、简单实例：<div ng-app="" 艘绒庳焰ng-init=""> <稆糨孝汶;p>简单计算器的编写</p> 价格：<input type="number" ng-model="price"> 数量：<input type="number" ng-model="num"> 总金额：<span>{{price*num}}</span> </div>

7、循环数组方法：使用ng-repeat遍历数组；<div ng-app="" ng-init="names=['zs','ls','ww']"> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div> </body>

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。