根据Code School的视频完成简单angularjs1的实例
首先完成一个小实例，目的是了解表达式可以进行赋值
| <!DOCTYPE html> <html ng-app="store"> <head> <meta charset="utf-8"><script src="../lib/angular.min.js"></script> <script type="text/javascript" src="../js/app4.js"></script> <link rel="stylesheet" type="text/css" href="../lib/bootstrap.min.css"> </head> <body ng-controller="StoreController as store"> <section> <ul class="nav nav-pills"> <!-- ng-click对Tab进行了赋值 --> <li><a href="" ng-click="tab = 1">Description</a></li> <li><a href="" ng-click="tab = 2">Specifications</a></li> <li><a href="" ng-click="tab = 3">Reviews</a></li> </ul> </section> <!-- 只要在controller区域内肉可以使用{ {}}表达式显示tab --> { {tab}} </body> </html> |
| (function(){ var app = angular.module('store',[]); app.controller('StoreController',function(){ }); })(); |
接下来要进行显示div，js文件不用修改
| <!DOCTYPE html> <html ng-app="store"> <head> <meta charset="utf-8"><script src="../lib/angular.min.js"></script> <script type="text/javascript" src="../js/app4.js"></script> <link rel="stylesheet" type="text/css" href="../lib/bootstrap.min.css"> </head> <body ng-controller="StoreController as store"> <!-- 设置初始值让Tab=1，显示第一div，可以先试一下不写ng-init,最后再加上 --> <section ng-init="tab = 1"> <ul class="nav nav-pills"> <!-- ng-click对Tab进行了赋值,ng-class为li增加了高亮显示，目的是让整个列表项显得更加好看 --> <li ng-class="{active:tab === 1}"><a href="" ng-click="tab = 1">Description</a></li> <li ng-class="{active:tab === 2}"><a href="" ng-click="tab = 2">Specifications</a></li> <li ng-class="{active:tab === 3}"><a href="" ng-click="tab = 3">Reviews</a></li> </ul> </section> <!-- 通过===判断是否显示div --> <div class="panel" ng-show="tab === 1"> <h4>Description</h4> <blockquote>None yet</blockquote> </div> <div class="panel" ng-show="tab === 2"> <h4>Specifications</h4> <blockquote>None yet</blockquote> </div> <div class="panel" ng-show="tab === 3"> <h4>Reviews</h4> <blockquote>None yet</blockquote> </div> </body> </html> |
将逻辑抽象成方法，放到PanelController中
| <!DOCTYPE html> <html ng-app="store"> <head> <meta charset="utf-8"><script src="../lib/angular.min.js"></script> <script type="text/javascript" src="../js/app4.js"></script> <link rel="stylesheet" type="text/css" href="../lib/bootstrap.min.css"> </head> <body> <!-- 设置初始值让Tab=1，显示第一div，可以先试一下不写ng-init,最后再加上 --> <section ng-controller="PanelController as panel"> <ul class="nav nav-pills"> <!-- ng-click对Tab进行了赋值,ng-class为li增加了高亮显示，目的是让整个列表项显得更加好看 --> <li ng-class="{active:panel.isSelected(1)}"><a href="" ng-click="panel.selectTab(1)">Description</a></li> <li ng-class="{active:panel.isSelected(2)}"><a href="" ng-click="panel.selectTab(2)">Specifications</a></li> <li ng-class="{active:panel.isSelected(3)}"><a href="" ng-click="panel.selectTab(3)">Reviews</a></li> </ul> <!-- 通过===判断是否显示div --> <div class="panel" ng-show="panel.isSelected(1)"> <h4>Description</h4> <blockquote>None yet</blockquote> </div> <div class="panel" ng-show="panel.isSelected(2)"> <h4>Specifications</h4> <blockquote>None yet</blockquote> </div> <div class="panel" ng-show="panel.isSelected(3)"> <h4>Reviews</h4> <blockquote>None yet</blockquote> </div> </section> </body> </html> |
| (function(){ var app = angular.module('store',[]);app.controller('PanelController', function(){ /*tab的初始值，不再使用ng-init进行设定，根据视频中说ng-init仅用于测试*/ this.tab = 1; /*对tab进行设定*/ this.selectTab = function(setTab){ this.tab = setTab; } /*判断是否是和设定的值是相等的*/ this.isSelected = function(checkTab){ return this.tab === checkTab; } }) })(); |