AngularJS的一點學習筆記

時間 2019-11-24

標籤 angularjs 一點 1點學習筆記欄目 AngularJS 简体版

原文原文鏈接

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

　　ng-options表達式的基本形式，形如 "<標籤> for <項目> in <數組>html

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

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

　　在表單的形式如<所選屬性>as <標籤> for <變量> in <數組>app

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

　　將對象進行分組spa

　　使用無做用域的控制器code

 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>