2016-05-16 6 views
0

ich eine Reihe von Array haben, die wie folgt aussehen:
Angularjs- Get Daten von 2 Dimension Array

$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' } 
    ] 
    } 
]; 

Lassen Sie uns sagt, wenn ich auf eine Registerkarte geklickt, die einen Wert durch ‚ONE_MTH‘, dann will ich das testArr zeigt alle Daten in 'ONE_MTH' an. Wie kann ich es in meinem Controller verarbeiten?

Antwort

0

Eine einfache Lösung wäre, dass jede Registerkarte eine "displaySelectedArray" -Funktion (erfundener Name) aufruft, die einen Indexwert übergibt. Diese Funktion enthält eine Controller-Eigenschaft mit dem Namen selectedArray, die auf den ausgewählten Schlüssel von testArr verweist. Dann wäre eine ng-repeat eine geeignete Option, um die ausgewählten Werte in Ihrer Vorlage anzuzeigen.

* Wenn Sie ein Beispiel möchten - wäre Ihnen gerne behilflich.

+0

kann mir ein Beispiel in js Geige oder Plünderer zeigen? Danke –

+0

Es sieht aus wie @Francois hat den Job gemacht. Wenn Sie ein Beispiel mit Tabs benötigen, lassen Sie es mich wissen. – AranS

0

Dies ist, was Sie brauchen: http://plnkr.co/edit/lx0Aq4dolh9lQVtr3Uwz?p=preview

Und dies ist der Code:

Controller-Code:

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; 
    } 
    } 

Ansicht Code

ich plunkr gemacht :

<!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> 
+0

danke. Ich habe die Idee, wie es geht. –

+0

Wenn diese Antwort für Sie nützlich war, markieren Sie sie bitte als akzeptiert – fablexis