Angular js 在数组对象中使用 ng-repeat 设置默认选项卡
Angular js set default tab with ng-repeat in array object
我想在默认选项卡中显示每个选项卡的最后一个对象。现在我的界面是这样的:tab[0]
last object is {"id": 8, "status": 1}
, tab[1]
last object is {"id": 8, "status": 1}
但这是错误的。我希望它看起来像这样:tab[0]
last object is {"id": 5, "status": 0}
, tab[1]last object is
{"id": 8, "status": 1}`.
我的错误界面图片:[1]:https://i.stack.imgur.com/MhvKX.png
我的 json 数据是这样的:
[
{
"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}
]
]
},
];
我的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;
};
我的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>
有人可以帮助确定我做错了什么吗?
您必须更正上次的选项卡选择逻辑。
由于 selectedTab
特定于您的数据数组中的每个节点,因此我解析了数组并向每个包含第一个数据节点的数据节点添加了 selectedTab
属性。
工作fiddle
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>
我想在默认选项卡中显示每个选项卡的最后一个对象。现在我的界面是这样的:tab[0]
last object is {"id": 8, "status": 1}
, tab[1]
last object is {"id": 8, "status": 1}
但这是错误的。我希望它看起来像这样:tab[0]
last object is {"id": 5, "status": 0}
, tab[1]last object is
{"id": 8, "status": 1}`.
我的错误界面图片:[1]:https://i.stack.imgur.com/MhvKX.png
我的 json 数据是这样的:
[
{
"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}
]
]
},
];
我的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;
};
我的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>
有人可以帮助确定我做错了什么吗?
您必须更正上次的选项卡选择逻辑。
由于 selectedTab
特定于您的数据数组中的每个节点,因此我解析了数组并向每个包含第一个数据节点的数据节点添加了 selectedTab
属性。
工作fiddle
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>