Angularjs-得到2維的數據陣列

我有一組排列的，看起來是這樣的：
Angularjs-得到2維的數據陣列

$scope.testArr = [ 
    { 
    'ONE_MTH': [ 
     { 'value':'1_1', 'rolle':'one1' }, 
     { 'value':'2_1', 'rolle':'two1' }, 
     { 'value':'3_1', 'rolle':'three1'} 
    ] 
    }, 
    { 
    'SIX_MTH': [ 
     { 'value':'1_2', 'rolle':'one2' }, 
     { 'value':'2_2', 'rolle':'two2' }, 
     { 'value':'3_2', 'rolle':'three2' } 
    ] 
    }, 
    { 
    'ONE_YEAR': [ 
     { 'value':'1_3', 'rolle':'one3' }, 
     { 'value':'2_3', 'rolle':'two3' }, 
     { 'value':'3_3', 'rolle':'three3' } 
    ] 
    } 
];

讓我們說，當我載着值的選項卡上單擊「ONE_MTH」，然後我想的testArr顯示'ONE_MTH'中的所有數據。我如何在我的控制器中處理它？

來源

2016-05-16 Yoon May

一個簡單的解決方案是讓每個選項卡調用一個「displaySelectedArray」函數（構成名稱），傳遞一個索引值。此功能將包含名爲selectedArray的控制器屬性，該屬性將引用testArr中的選定密鑰。然後一個ng-repeat將是一個合適的選項來顯示模板中的選定值。

*如果你想要一個例子 - 很樂意協助。

來源

2016-05-16 14:58:34 AranS

可以告訴我一個例子在js小提琴或plunker？謝謝 –

看起來@Francois做了這份工作。如果你需要一個標籤的例子 - 讓我知道。 – AranS

這是你所需要的：

我做了一個plunkr：http://plnkr.co/edit/lx0Aq4dolh9lQVtr3Uwz?p=preview

這是代碼：

控制器代碼：

angular 
    .module("myApp", []) 
    .controller("myCtrl", myCtrl) 

    myCtrl.$inject = ["$scope"]; 

    function myCtrl($scope){ 
    $scope.parentSelector = "ONE_MTH"; 

    $scope.testArr = [ 
     { 
     'ONE_MTH': [ 
      { 'value':'1_1', 'rolle':'one1' }, 
      { 'value':'2_1', 'rolle':'two1' }, 
      { 'value':'3_1', 'rolle':'three1'} 
     ] 
     }, 
     { 
     'SIX_MTH': [ 
      { 'value':'1_2', 'rolle':'one2' }, 
      { 'value':'2_2', 'rolle':'two2' }, 
      { 'value':'3_2', 'rolle':'three2' } 
     ] 
     }, 
     { 
     'ONE_YEAR': [ 
      { 'value':'1_3', 'rolle':'one3' }, 
      { 'value':'2_3', 'rolle':'two3' }, 
      { 'value':'3_3', 'rolle':'three3' } 
     ] 
     } 
    ]; 

    $scope.filterKeys = function(item){ 
     var result = {}; 
     angular.forEach(item, function(value, key) { 
     angular.forEach(value, function(subValue, subKey) { 
      result[subKey] = subValue; 
     }) 
     }); 

     return result; 
    } 

    $scope.getChildren = function(key){ 
     if(key) 
     $scope.parentSelector = key; 
     var result = {}; 
     var flag = true; 
     angular.forEach($scope.testArr, function(value, key) { 
     if(flag){ 
      angular.forEach(value, function(subValue, subKey) { 

      if(subKey == $scope.parentSelector){ 

       result = subValue; 
       flag = false; 

      } 
      }) 
     } 
     }); 
     return result; 
    } 
    }

查看代碼 ：

<!DOCTYPE html> 
<html ng-app="myApp"> 

    <head> 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
    <script data-require="[email protected]" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script> 
    <script data-require="[email protected]" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script data-require="[email protected]" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="myCtrl"> 
    <h1>Selects</h1> 
    {{parentSelector}} 

    <div> 
     <!-- Nav tabs --> 
     <ul class="nav nav-tabs" role="tablist"> 
     <li role="presentation" ng-repeat="(key, value) in filterKeys(testArr)" ng-class="{active: $index==0}"> 
      <a ng-href="#{{key}}" aria-controls="home" role="tab" data-toggle="tab" ng-click="getChildren(key);"> 
      {{key}} 
      </a> 
     </li> 
     </ul> 

     <!-- Tab panes --> 
     <div class="tab-content"> 
     <div ng-repeat="(key, value) in filterKeys(testArr)" role="tabpanel" class="tab-pane" ng-class="{'active': $index==0}" id="{{key}}"> 
      <p ng-repeat="(subKey, Subvalue) in getChildren()">Value: {{Subvalue.value}}/Rolle: {{Subvalue.rolle}}</p> 
     </div> 
     </div> 
    </div> 
    </body> 

</html>

來源

2016-05-16 16:13:55 fablexis

謝謝。我知道如何去做。 –

如果此答案對您有用，請將其標記爲已接受 – fablexis

Angularjs-得到2維的數據陣列

回答

相關問題