Angularjs在陣列物件中使用ng-repeat設定默認選項卡-有解無憂

我想在默認選項卡中顯示每個選項卡的最后一個物件。現在我的界面是這樣的：tab[0]last object is {"id": 8, "status": 1}，tab[1]last object is{"id": 8, "status": 1}但它是錯誤的。我希望它看起來像這樣：tab[0]最后一個物件是{"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>

有人可以幫助確定我做錯了什么嗎？

uj5u.com熱心網友回復：

您必須更正最后一個選項卡選擇邏輯。

由于selectedTab特定于您的資料陣列中的每個節點，我決議了該陣列并將一個selectedTab屬性添加到每個保存其第一個資料節點的屬性。

作業小提琴

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/312563.html

標籤：javascript html angularjs 标签

上一篇：無法從AngularJS控制器內部訪問表單

下一篇：將新值插入打字稿中的物件陣列