码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS的一点学习笔记

时间:2016-12-09 00:23:06      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:css   bootstrap   button   ffffff   form   trap   rip   script   hello   

  ng-options="item.action for item in todos"

  ng-options表达式的基本形式, 形如 "<标签> for <项目> in <数组>

 

  <option value="">(chosse one) </option>

 

  ng-options="item.id as item.action for item in todos"

  在表单的形式如<所选属性>as <标签> for <变量> in <数组>

 

  ng-options="item.action group by item.place for item in todos" 

  将对象进行分组

 

  使用无作用域的控制器

  

 1 <!DOCTYPE html>
 2 <html lang="en" ng-app="iApp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
 7     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css">
 8     <script src="bower_components/angular/angular.js"></script>
 9     <script>
10         angular.module(iApp,[])
11             .controller(topCtrl,function(){
12                 this.dataValue=Hello,Adam;
13                 this.reverseText=function(){
14                     this.dataValue=this.dataValue.split("").reverse().join("");
15                 }
16             })
17     </script>
18 </head>
19 <body >
20     <div class="well" ng-controller="topCtrl as ctrl">
21         <h4>Top level Controller</h4>
22         <div class="input-group">
23             <span class="input-group-btn">
24                 <button class="btn btn-default" ng-click="ctrl.reverseText()">Reverse</button>
25             </span>
26             <input type="text" class="form-control" ng-model="ctrl.dataValue">
27         </div>
28     </div>    
29 </body>
30 </html>

当应用无作域的控制器时,表达式的格式化形如:<要应用的控制器> as <变量名>

然后在视图中使用ctrl变量访问数据和行为,类似这样:<input.....ng-model="ctrl.dataValue">

 

AngularJS的一点学习笔记

标签:css   bootstrap   button   ffffff   form   trap   rip   script   hello   

原文地址:http://www.cnblogs.com/thomaspha/p/6147031.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!