首页 > 代码库 > AngularJS的一点学习笔记

AngularJS的一点学习笔记

2024-08-26 01:05:53   243人阅读

　　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的一点学习笔记


联系
我们