Quiero mostrar el último objeto de cada pestaña en la pestaña predeterminada. Ahora mi interfaz es así: tab[0] el último objeto es {"id": 8, "status": 1} , tab[1] el último objeto es {"id": 8, "status": 1} pero Está Mal. Quiero que se vea así: tab[0] el último objeto es {"id": 5, "status": 0} , tab[1] last object is {"id": 8, "status": 1}` .
Imagen de mi interfaz incorrecta: [1]: https://i.stack.imgur.com/MhvKX.png
Mis datos json como este:
[ { "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} ] ] }, ];Mi 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; };mi 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>¿Puede alguien ayudarme a identificar qué estoy haciendo mal?
Tienes que corregir tu última lógica de selección de pestañas.
Dado que la selectedTab es específica de cada nodo en su matriz de datos, analicé la matriz y agregué una propiedad de pestaña selectedTab a cada nodo de datos que tiene su primera.
violín de trabajo
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>