Tab directive with data-bound content in AngularJS

Question

I'm trying to learn AngularJs and am uncertain as to the correct approach to create tabbed panes which are populated via data-binding.

Specifically what I have is three HTML tables which pull their data from 3 different JSON files. The code which displays this works nicely:

JS:

var myApp = angular.module("myApp",[]);

myApp.factory("Purchases", function(){
    var Purchases = {};
    Purchases.data = [
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        },
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        }
    ];
    return Purchases;
});

function PurchasesCtrl($scope, Purchases){
    $scope.purchases = Purchases;   
}


myApp.factory("SaleProducts", function(){
    var SaleProducts = {};
    SaleProducts.data = [
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        },
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        }
    ];
    return SaleProducts;
});

function SaleProductsCtrl($scope, SaleProducts){
    $scope.saleProducts = SaleProducts;   
}


myApp.factory("Sale30Days", function(){
    var Sale30Days = {};
    Sale30Days.data = [
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        },
        {
            date: "20/05/2012",
            text: "Lorem ipsum dolor sit amet ipsum dolor"
        }
    ];
    return Sale30Days;
});

function Sale30DaysCtrl($scope, Sale30Days){
    $scope.sale30Days = Sale30Days;   
}

HTML:

<div ng-app="myApp">
    <div class="tabs">
        <a href="" title="" class="tab selected" rel="tab1">Tab 1</a>
        <a href="" title="" class="tab" rel="tab2">Tab 2</a>
        <a href="" title="" class="tab" rel="tab3">Tab 3</a>
    </div>
    <div id="tab1" class="tabContent selected" ng-controller="PurchasesCtrl">
        <h2>Tab content 1:</h2>
        <table cellspacing="0">
            <tr class="first">
                <th class="first">Date</th>
                <th>Description</th>
            </tr>
            <tr ng-repeat="purchase in purchases.data" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'last':$last}">
                <td class="first">{{purchase.date}}</td>
                <td>{{purchase.text}}</td>
            </tr>
        </table>
    </div>


    <div id="tab2" class="tabContent selected" ng-controller="SaleProductsCtrl">
        <h2>Tab content 2:</h2>                         
        <table cellspacing="0">
            <tr class="first">
                <th class="first">Date</th>
                <th>Description</th>
            </tr>
            <tr ng-repeat="saleProduct in saleProducts.data" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'last':$last}">
                <td class="first">{{saleProduct.date}}</td>
                <td>{{saleProduct.text}}</td>
            </tr>
        </table>
    </div>


    <div id="tab3" class="tabContent selected" ng-controller="Sale30DaysCtrl">
        <h2>Tab content 3:</h2>
        <table cellspacing="0">
            <tr class="first">
                <th class="first">Date</th>
                <th>Description</th>
            </tr>
            <tr ng-repeat="sale30Day in sale30Days.data" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'last':$last}">
                <td class="first">{{sale30Day.date}}</td>
                <td>{{sale30Day.text}}</td>
            </tr>
        </table>
    </div>
</div>

There's a fiddle here: http://jsfiddle.net/9hZx5/2/.

Now the part I'm not sure on is how to hide the 2nd and 3rd tabs on page load and then use the links at the top to toggle between the tabbed content panes. Using jQuery to do this (a) didn't work and (b) seemed very wrong as I'd like to do it the 'Angular' way.

I've tried adding 'ng:click' and 'ng:show' to the links and panels as per this fiddle http://jsfiddle.net/vojtajina/vM4FY/ but I can't get it to work. The tutorials/examples I've found on this (e.g the Angular Bootstrap tabs directive http://angular-ui.github.io/bootstrap/) all seem to generate the tabs dynamically via a repeater, which adds a lot of complexity in my scenario.

I wondered if anyone could point me in the right direction?

Many thanks folks.

Mukyuu · Accepted Answer · 2018-11-27 09:32:58Z

Actually, the 'ng-click' and 'ng-show' directives did work - it was some additional CSS that was overriding the display and making the tab selection not appear to work. The solution was to change the above tab selector links to:

<a href="" title="" class="tab active" rel="tab1" ng:click="selected=1">Purchases</a>
<a href="" title="" class="tab" rel="tab2" ng:click="selected=2">Products on sale</a>
<a href="" title="" class="tab" rel="tab3" ng:click="selected=3">Last 30 days sales</a>

And the tab panes to:

<div id="tab1" class="tabContent" ng-controller="PurchasesCtrl" ng:show="selected == 1">
    Tab content
</div>
<div id="tab2" class="tabContent" ng-controller="SaleProductsCtrl" ng:show="selected == 2">
    Tab content
</div>
<div id="tab3" class="tabContent" ng-controller="Sale30DaysCtrl" ng:show="selected == 3">
    Tab content
</div>

body {
    font: 12px arial, helvetica, sans-serif;
}
h2 {
    font-size: 16px;
}
table {
    margin: 20px 0;
    border-collapse:collapse;
}
th,td {
    border: 1px solid #ccc;
    padding: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script>
<script>
    	var myApp = angular.module("myApp",[]);

	myApp.factory("Purchases", function(){
	    var Purchases = {};
	    Purchases.data = [
	        {
	            date: "20/05/2012",
	            text: "Lorem ipsum dolor sit amet ipsum dolor",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        },
	        {
	            date: "20/05/2012",
	            text: "Lorem ipsum dolor sit amet ipsum dolor",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        },
	        {
	            date: "20/05/2012",
	            text: "Lorem ipsum dolor sit amet ipsum dolor",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        }
	    ];
	    return Purchases;
	});

	function PurchasesCtrl($scope, Purchases){
	    $scope.purchases = Purchases;   
	}




	myApp.factory("SaleProducts", function(){
	    var SaleProducts = {};
	    SaleProducts.data = [
	        {
	            date: "20/05/2012",
	            text: "Lorem ipsum dolor sit amet ipsum dolor",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        },
	        {
	            date: "20/05/2012",
	            text: "Lorem ipsum dolor sit amet ipsum dolor",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        }
	    ];
	    return SaleProducts;
	});

	function SaleProductsCtrl($scope, SaleProducts){
	    $scope.saleProducts = SaleProducts;   
	}




	myApp.factory("Sale30Days", function(){
	    var Sale30Days = {};
	    Sale30Days.data = [
	        {
	            date: "20/05/2012",
	            text: "Lorem ipsum dolor sit amet ipsum dolor",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        },
	        {
	            date: "20/05/2012",
	            text: "Lorem ipsum dolor sit amet ipsum dolor",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        },
	        {
	            date: "20/05/2012",
	            text: "Lorem ipsum dolor sit amet ipsum dolor",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        },
	        {
	            date: "20/05/2012",
	            text: "Lorem ipsum dolor sit amet ipsum dolor",
				price: "£123.45",
				availability: "Available until 10th Dec 2013"
	        }
	    ];
	    return Sale30Days;
	});

	function Sale30DaysCtrl($scope, Sale30Days){
	    $scope.sale30Days = Sale30Days;   
	}
</script>

<div ng-app="myApp">
	<div class="tabs">
		<a href="" title="" class="tab active" rel="tab1" ng:click="selected=1">Purchases</a>
<a href="" title="" class="tab" rel="tab2" ng:click="selected=2">Products on sale</a>
<a href="" title="" class="tab" rel="tab3" ng:click="selected=3">Last 30 days sales</a>
	</div>
	<div id="tab1" class="tabContent" ng-controller="PurchasesCtrl" ng:show="selected == 1">
        <h2>Purchases:</h2>
		<table cellspacing="0">
			<tr class="first">
				<th class="first">Date</th>
				<th>Description</th>
				<th>Amount</th>
				<th>Status</th>
			</tr>
			<tr ng-repeat="purchase in purchases.data" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'last':$last}">
				<td class="first">{{purchase.date}}</td>
				<td>{{purchase.text}}</td>
				<td>{{purchase.price}}</td>
				<td>{{purchase.availability}}</td>
			</tr>
        </table>
	</div>


	<div id="tab2" class="tabContent" ng-controller="SaleProductsCtrl" ng:show="selected == 2">
        <h2>Sale products:</h2>							
		<table cellspacing="0">
			<tr class="first">
				<th class="first">Date</th>
				<th>Description</th>
				<th>Amount</th>
				<th>Status</th>
			</tr>
			<tr ng-repeat="saleProduct in saleProducts.data" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'last':$last}">
				<td class="first">{{saleProduct.date}}</td>
				<td>{{saleProduct.text}}</td>
				<td>{{saleProduct.price}}</td>
				<td>{{saleProduct.availability}}</td>
			</tr>
        </table>
	</div>


	<div id="tab3" class="tabContent" ng-controller="Sale30DaysCtrl" ng:show="selected == 3">
        <h2>Sale 30 days:</h2>
		<table cellspacing="0">
			<tr class="first">
				<th class="first">Date</th>
				<th>Description</th>
				<th>Amount</th>
				<th>Status</th>
			</tr>
			<tr ng-repeat="sale30Day in sale30Days.data" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'last':$last}">
				<td class="first">{{sale30Day.date}}</td>
				<td>{{sale30Day.text}}</td>
				<td>{{sale30Day.price}}</td>
				<td>{{sale30Day.availability}}</td>
			</tr>
        </table>
	</div>
</div>

Collectives™ on Stack Overflow

Tab directive with data-bound content in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related