ต้องการทำเเบบในภาพ
ตอนนี้พอมันโหลดครั้งเเรกมันไม่เลือกไว้
จากโค้ด
โค้ด: เลือกทั้งหมด
<tab ng-repeat="tab in tabs" name="{{tab.name}}" id="{{tab.id}}" selected="{{ $index == 1}}">
{{tab.name}}
</tab>
$index มันส่งค่ามาถูกนะเเต่ว่า มันจะแสดงผลตอนคลิกเท่านั้น
เเต่ถ้าเขียน
โค้ด: เลือกทั้งหมด
<tab ng-repeat="tab in tabs" name="{{tab.name}}" id="{{tab.id}}" selected>
{{tab.name}}
</tab>
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!doctype html>
<html ng-app="mainModule">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!--<cript type="text/javascript" src="https://raw.githubusercontent.com/BinaryMuse/ngInfiniteScroll/1.0.0/build/ng-infinite-scroll.js"></script>-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.tab-control {
list-style: none;
padding: 0;
margin: 5px;
}
.tab-control li {
display: inline;
padding: 5px 20px;
border: 1px solid grey;
border-bottom: 0;
border-radius: 5;
cursor: pointer;
}
.tab-control li.selected {
background-color: lightblue;
}
.tab-content header {
display : none;
}
.tab-content {
border: 1px solid black;
width: 100%;
height: 100%;
display: none;
}
.tab-content.selected {
display: block;
}
</style>
<body>
<!-- <tab-control id="MainTabControl" class="red">
<tab name="FirstTab" id="Tab1">
Tab 1 stuff
</tab>
<tab name="SecondTab" id="Tab2" selected>
Tab 2 stuff
</tab>
<tab name="ThirdTab" id="Tab3">
<strong>Tab 3</strong>
</tab>
</tab-control>-->
<div ng-controller="DynamicTabController">
<tab-control>
<tab ng-repeat="tab in tabs" name="{{tab.name}}" id="{{tab.id}}" selected="{{ $index == 1}}">
{{tab.name}}
</tab>
</tab-control>
</div>
<script type="text/ng-template" id="tab2ContentTemplate">
Tab2
</script>
<script type="text/ng-template" id="tabControlTemplate">
<ul id="{{id}}" class="{{klass}} tab-control">
<li ng-repeat="tab in tabs" ng-class="{ selected: tab.selected }" class="tab" ng-click="selectTab(tab)">{{tab.name}}</li>
</ul>
<section ng-transclude>
</section>
</script>
<script type="text/ng-template" id="tabTemplate">
<article id="{{id}}" ng-class="{ selected: selected}" class="{{klass}} tab-content">
<header>
<h1>{{ name }}</h1>
</header>
<section ng-transclude>
</section>
</article>
</script>
</body>
<script>
var mainModule = angular.module("mainModule", []);
mainModule.directive('tabControl', function () {
return {
restrict: 'E',
templateUrl: 'tabControlTemplate',
scope: {
id: '@id',
klass: '@class',
},
transclude: true,
controller: ['$scope', function ($scope) {
$scope.tabs = []
this.addTab = function (tab) {
$scope.tabs.push(tab);
}
$scope.selectTab = function (tab) {
for (var i = 0; i < $scope.tabs.length; i++) {
if (tab.name != $scope.tabs[i].name) {
$scope.tabs[i].selected = false;
} else {
$scope.tabs[i].selected = true;
}
}
}
}]
};
});
mainModule.directive('tab', function () {
return {
restrict: 'E',
templateUrl: 'tabTemplate',
transclude: true,
replace: true,
scope: {
id: '@id',
name: '@name',
},
require: '^tabControl',
link: function (scope, element, attrs, ctrl) {
scope.selected = attrs.selected == "" || attrs.selected == true
ctrl.addTab(scope);
}
};
});
mainModule.controller("DynamicTabController", ['$scope', function ($scope) {
$scope.tabs = [
{name: 'Tab1', id: 'Tab1'},
{name: 'Tab2', id: 'Tab2'},
{name: 'Tab3', id: 'Tab3'},
{name: 'Tab4', id: 'Tab4'},
{name: 'Tab5', id: 'Tab5'},
{name: 'Tab6', id: 'Tab6'},
{name: 'Tab7', id: 'Tab7'}
]
}]);
</script>
</html>