在平時的項目開發中,應該會經常遇到上圖所示的需求,就是在一個頁面中有多個標籤,被選中的標籤顏色會高亮顯示,切換不同標籤顯示相應的不同內容。如果內容代碼過多則寫在同一個html文件就會顯得特別亂,所以這裏我們最好把頁面代碼分開單獨管理,controller也可以分開來管理,這樣就會顯得清楚的多。這裏就要使用到Angularjs中個ng-include指令。
多標籤的編寫
首先需要了解需求:
- 同時只能選中一個標籤
- 被選中的標籤背景色以及自體顏色都將改變。
第一個需求我們可以使用一個flag變量來控制,即一個是flag另一個則是!flag。而第二個需求則可以使用ng-class指令來完成,提前把兩個樣式的class寫好,通過ng-class來判斷何時顯示何種樣式即可。
這裏我把所有的邏輯代碼都寫在了HTML頁面中,首先在頁面初始化的時候使用ng-init指令初始化一個flag變量,使用ng-class綁定不同的樣式,然後使用ng-click事件來動態改變flag。代碼如下:
以下全部的頁面代碼都是基於前端框架IONIC,具體樣式代碼不再贅述
<ion-view ng-init="test=true">
<div class="bar bar-header bar-royal">
<div class="title">Test</div>
</div>
<div class="bar bar-subheader">
<div class="button-bar">
<a class="button" ng-class="test?'button-positive':''" ng-click="test=true">button1</a>
<a class="button" ng-class="!test?'button-positive':''" ng-click="test=false">button2</a>
</div>
</div>
<ion-content class="has-subheader">
</ion-content>
</ion-view>
Ng-Include的使用
多標籤button編寫好了,需要對點擊的button展示對應的頁面內容,這裏使用ng-include來管理代碼。如下:
<ion-content class="has-subheader">
<div ng-show="test" ng-include="'template/template1.html'">這裏不管寫什麼都不會展示,完全被ng-include取代</div>
<div ng-show="!test" ng-include="'template/template2.html'"></div>
</ion-content>
這裏我使用的是ng-show,即在頁面加載的時候就把全部的內容加載完畢了,可以起到一個預加載的效果,當然,如果需要點擊對應button的時候再展示相應的內容則可以使用ng-if,效果一樣。
ng-include後面寫的是html文件對應的url地址,是相對於index.html的地址。
來看一下template1的代碼:
<div ng-controller="template1Controller">
<div class="row">
<div class="col text-center" ng-repeat="x in tests">{{x.name}}</div>
</div>
</div>
我對template1進行了單獨的controller管理,Ctrl代碼爲:
angular.module('includeExample', ['ionic'])
.controller('template1Controller', ['$scope', function ($scope) {
$scope.tests = [
{
name: 'test1'
}, {
name: 'test2'
}, {
name: 'test3'
}
]
}]);
到這,Ng-Include的用法大概就說完了,我覺得在項目的開發中還是比較有用的,分開管理邏輯和頁面都會比較清晰,也會在一定程度上提高開發效率。
效果爲: