I want to show last object of each tab in default tab. Now my interface is like this: tab[0] last object is {"id": 8, "status": 1}, tab[1] last object is {"id": 8, "status": 1} but it is wrong. I want it to look like this: tab[0] last object is {"id": 5, "status": 0}, tab[1]last object is{"id": 8, "status": 1}`.
Image of my wrong interface: [1]: https://i.stack.imgur.com/MhvKX.png
My json data like this:
[
{
"tab":[
[
{"id": 1, "status": 1},
{"id": 2, "status": 1},
{"id": 3, "status": 1},
],
[
{"id": 4, "status": 1},
],
[
{"id": 5, "status": 0}
]
]
},
{
"tab":[
[
{"id": 6, "status": 1},
{ "id": 7, "status": 1},
],
[
{"id": 8, "status": 1}
]
]
},
];
My js:
for(let i = 0; i < $scope.data.length; i++) {
for(let j = 0; j < $scope.data[i].tab.length; j++) {
$scope.selecttab = $scope.data[i].tab[j];
}
}
$scope.getTab = function(obj) {
$scope.selecttab = obj;
};
My html
<div ng-repeat="obj in data">
<ul class="nav nav-tabs">
<li ng-class="{ active: selecttab == obj1 }" ng-repeat="obj1 in obj.tab track by $index">
<a href ng-click="getTab(obj1)">{{ $index }}</a>
</li>
</ul>
<div class="tab-content" ng-repeat="obj1 in selecttab">
ID: {{obj1.id}}<br>
Status : {{obj1.status}}
</div>
</div>
Can someone please help in identifying what am i doing wrong?
You have to correct your last tab selection logic.
Since the selectedTab is specific to each node in your data array, I parsed the array and added a selectedTab tab property to each data node that has its first.
working violin
var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.data = [ { "tab": [ [{ "id": 1, "status": 1 }, { "id": 2, "status": 1 }, { "id": 3, "status": 1 }], [{ "id": 4, "status": 1 }], [{ "id": 5, "status": 0 }] ] }, { "tab": [ [{ "id": 6, "status": 1 }, { "id": 7, "status": 1 }], [{ "id": 8, "status": 1 }] ] }, ]; for (let i = 0; i < $scope.data.length; i++) { $scope.data[i].selectedTab = $scope.data[i].tab[$scope.data[i].tab.length - 1]; } $scope.setSelectedTab = function (node, tab) { tab.selectedTab = node; }; }); .active { color: red; } <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <div ng-repeat="obj in data"> <ul class="nav nav-tabs"> <li ng-class="{ active: obj1[0] && obj.selectedTab == obj1 }" ng-repeat="obj1 in obj.tab track by $index"> <a href ng-click="setSelectedTab(obj1, obj)">{{ $index }} </a> </li> </ul> <div class="tab-content" ng-repeat="tab in obj.selectedTab track by $index"> ID: {{tab.id}}<br> Status : {{tab.status}} </div> </div> </div>