之前写了一个简单的angular的页面，这边主要要学习几个用法：controller，filter
（1）第一个练习主要是把原来的ng-init的内容移到controller
首先定义module名称
<html lang="en" ng-app="confusionApp">
然后初始化module和controller,是在script标签下面
<script>
var app = angular.module(‘confusionApp‘,[]);
app.controller(‘menuController‘, function() {
});
</script>把原来ng-init的内容删除掉，写到function里面，同时this.dishes=dishes相当于controller的成员变量吧
同时把原来使用ng-init标签的地方，替换成使用ng-controller,取个别名
<div class="row row-content" ng-controller="menuController as menuCtrl"> 最后引用的时候使用menuCtrl.dishes
<li class="media" ng-repeat="dish in menuCtrl.dishes"> （2）第二个练习是使用filter，主要是angular自带的filter，前面已经看到currency了，就是把价格的格式转换成货币的格式,其他的还有uppercase,lowercase,currency,date,filter,orderBy,json,limitTo这个练习主要还讲了bootstrap的tab，ng-class ng-click的用法，最后讲了filter1、首先把之前的评论的部分删掉，暂时没用了
<p>Comment: {{dish.comment}}</p>
<p>Type your comment:
<input type="text" ng-model="dish.comment"></p>
2、再加上bootstrap的tab <ul class="nav nav-tabs" role="tablist"> <li role="presentation"> <a aria-controls="all menu" role="tab">The Menu</a></li> <li role="presentation"> <a aria-controls="appetizers" role="tab">Appetizers</a></li> <li role="presentation"> <a aria-controls="mains" role="tab">Mains</a></li> <li role="presentation"> <a aria-controls="desserts" role="tab">Desserts</a></li> </ul>3、这个时候下面的menulist还不是在tab控制的，移到tab中去
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
. . .
</ul>
</div>
4、下一步就是在tab页之间切换首先在controller中维护下当前的tab变量
this.tab = 1;
然后在controller中添加函数select
this.select = function(setTab) {
this.tab = setTab;
}
使用ng-click在对应tab被点击的时候调用select更新tab的值
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
<a ng-click="menuCtrl.select(1)"
aria-controls="all menu"
role="tab">The Menu</a></li>
<li role="presentation">
<a ng-click="menuCtrl.select(2)"
aria-controls="appetizers"
role="tab">Appetizers</a></li>
<li role="presentation">
<a ng-click="menuCtrl.select(3)"
aria-controls="mains"
role="tab">Mains</a></li>
<li role="presentation">
<a ng-click="menuCtrl.select(4)"
aria-controls="desserts"
role="tab">Desserts</a></li>
</ul>使用ng-class根据条件更新页面的CSS，实现tab间的切换
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"
ng-class="{active:menuCtrl.isSelected(1)}">
<a ng-click="menuCtrl.select(1)"
aria-controls="all menu"
role="tab">The Menu</a></li>
<li role="presentation"
ng-class="{active:menuCtrl.isSelected(2)}">
<a ng-click="menuCtrl.select(2)"
aria-controls="appetizers"
role="tab">Appetizers</a></li>
<li role="presentation"
ng-class="{active:menuCtrl.isSelected(3)}">
<a ng-click="menuCtrl.select(3)"
aria-controls="mains"
role="tab">Mains</a></li>
<li role="presentation"
ng-class="{active:menuCtrl.isSelected(4)}">
<a ng-click="menuCtrl.select(4)"
aria-controls="desserts"
role="tab">Desserts</a></li>
</ul>
好了，和前面一样，在controller增加一个function this.isSelected = function(setTab){ return this.tab === setTab; };
5、最后一步使用filter，没有指定名字的时候表示匹配所有field
<li class="media" ng-repeat="dish in menuCtrl.dishes | filter:menuCtrl.filtText">
<li class="media" ng-repeat="dish in menuCtrl.dishes | filter:{category:menuCtrl.filtText}">
需要在controller中初始化filtText this.filtText = ‘‘;需要在设置tab的时候也设置filterText this.select = function(setTab){ this.tab = setTab;
if (setTab === 2) this.filtText = "appetizer"; else if (setTab === 3) this.filtText = "mains"; else if (setTab === 4) this.filtText = "dessert"; else this.filtText = ""; };
完成！
时间： 2024-12-18 06:51:28