首页 > 代码库 > AngularJS的基础元素应用
AngularJS的基础元素应用
<!doctype html> <!-- 标记ng-app告诉AngularJS处理整个HTML页并引导应用 --> <html ng-app> <head> <meta charset="UTF-8"> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> <script src="js/controllers.js"></script> <!-- 当绑定两个花括号在title元素上可以实现我们的目标,但是你或许发现了,页面正加载的时候它们已经显示给用户看了。一个更好的解决方案是使用ngBind或者ngBindTemplate指令,它们在页面加载时对用户是不可见的 --> <title ng-bind-template="Google Phone Gallery: {{‘ha ha‘}}">Google Phone Gallery</title> </head> <body ng-controller="PhoneListCtrl"> <!-- 双向绑定 ng-model="yourname" --> Your name: <input type="text" ng-model="yourname" placeholder="World"> <hr> Hello {{yourname || ‘World‘}}! <hr> <!-- 从控制器取出数据,迭代显示 --> <!-- PhoneListCtrl控制器里面的方法 --> Search: <input ng-model="query"> <!-- 这里的 orderProp会取出控制器里面的默认 orderProp="age" --> Sort by: <select ng-model="orderProp"> <option value="name">name order</option> <option value="age">age order</option> </select> <ul> <!-- 控制器中 PhoneListCtrl方法定义的变量 phones迭代 ng-repeat迭代元素--> <!-- filter函数使用query的值来创建一个只包含匹配query记录的新数组 --> <!-- orderBy排序绑定到上面的 orderProp元素 --> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> {{phone.name}} <p>{{phone.snippet}}</p> </li> <hr> <!-- 下面是一些联系 --> <p>Total number of phones: {{phones.length}}</p> </ul> <hr> <div ng-controller="HelloWordCtrl"> 测试控制器: {{hello}} </div> <hr> <table> <tr><th>row number</th></tr> <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr> </table> </body> </html>
AngularJS的基础元素应用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。