Zugang verschachtelte JSON als Schieber AngularJS

Ich habe eine JSON-Datei, die diese Struktur hat:Zugang verschachtelte JSON als Schieber AngularJS

{ "short_title":"HB_START_SHORT_TITLE", 
     "tips{"1":"HB_START_TIPS_1_1","2":"HB_START_TIPS_1_2","3":"HB_START_TIPS_1_3","4":"HB_START_TIPS_1_4"}, 
    },

Ich mag würde den verschachtelten Artikel „Tipps“ als Schieber mit vorherigen nächsten Tasten drucken.

Deshalb schrieb ich diesen Code in meinem HTML unter:

<ul class="sb-parentlist"> 
     <div data-ng-repeat="parts in data track by $index"> 
      <li> 
       <div class="sb-open" ng-show="showDetails"> 
       {{parts.short_text|translate}} 
       <br> 
        <li><span class="sb-text-title" href="#" ng-click="OpenTips = ! OpenTips"><b>Tips</b></span> 
        <span ng-show="OpenTips" class="sb-open"> 
        <br> 

         <div ng-repeat="data in parts.tips track by $index" ng-class="{'tips-hide': $index > $index + 1}"> 
          {{data|translate}} 
          <br> 
          <div class="keys"> 
           <button type="button" class="btn btn-pre" ng-click="$index = $index > 1 ? $index - 1 : 1">Previous</button> 
           <button type="button" class="btn btn-next" ng-click="$index = $index < data.length ? $index + 1 : data.length">Next</button> 
          </div> 
         </div> 
        </span> 
        </li> 


       </ul> 

      </div> 
     </li> 
    </div> 
    </ul>

und die Spitzen-hide Klasse in CSS:

.tips-hide { 
    left: -100px !important; 
    opacity: 0 !important; 
} 


.sb-open { 
     display: block; 
     height: auto; 
     opacity: 1; 
     transition:all 0.6s ease; 

     li { 
      display: block; 
     } 
    }

Aber was ich bin immer ist jeder Element in der Liste nacheinander, mit den Tasten auf der Unterseite von jedem von ihnen.

Abbildung unten:

Quelle

2016-05-20 Kratos

könnten Sie bitte einen Screenshot, so kann ich verstehen machen, was falsch ist –

wie ein CSS Problem aussieht. Bitte geben Sie mehr CSS :) – aifrim

Ich habe weitere Details hinzugefügt – Kratos

ng-repeat auf Objekt kann nicht durch den Index (zumindest nicht in dieser Art und Weise) verfolgt wird Ich habe einige Teile auf Code geändert auf Code-Schnipsel zu simulieren , ob es hilft.

var app = angular.module('app', []); 
 

 
app.controller('DemoCtrl', function($scope) { 
 
    this.openTips = true; 
 
    $scope.tipsIndex = 1; 
 
    this.info = [{ "short_title":"HB_START_SHORT_TITLE", 
 
     "tips" : {"1":"HB_START_TIPS_1_1","2":"HB_START_TIPS_1_2","3":"HB_START_TIPS_1_3","4":"HB_START_TIPS_1_4"} 
 
}]; 
 
    
 
    $scope.decrement = function() { 
 
    if($scope.tipsIndex > 1){ 
 
     $scope.tipsIndex = $scope.tipsIndex - 1; 
 
    } 
 
    }; 
 
    
 
    $scope.increment = function(partsIndex) { 
 
    if($scope.tipsIndex < partsIndex){ 
 
     $scope.tipsIndex = $scope.tipsIndex + 1; 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="app"> 
 
    <div ng-controller="DemoCtrl as demo"> 
 
    <ul class="sb-parentlist"> 
 
     <ul class="sb-parentlist"> 
 
     <div data-ng-repeat="parts in demo.info track by $index"> 
 
      <li> 
 
      <div class="sb-open"> 
 
       {{parts.short_title}} 
 
       <br> 
 
       <li><span href="#" ng-click="demo.openTips = !demo.openTips"><b>Tips</b></span> 
 
        <span ng-show="demo.openTips" class="sb-open"> 
 
        <br> 
 
        <div ng-repeat="(key, value) in parts.tips" ng-show="key == tipsIndex"> 
 
        {{key}} 
 
        
 
        {{value}} 
 
        <br> 
 
        <div class="keys"> 
 
         {{Object.size(parts.tips)}} 
 
        </div> 
 
        </div> 
 
        <button ng-click='decrement()'>Previous</button> 
 
        <button type="button" class="btn btn-next" ng-click="increment(3)">Next</button> 
 
        </span> 
 
       </li> 
 
       </div> 
 
      </ul> 
 
      </li> 
 
     </div> 
 
     </ul> 
 
    </ul> 
 
    </div> 
 
</body>

Quelle

2016-05-23 17:14:39

Vielen Dank dafür! Ich würde es gerne tun, ohne den Controller zu wechseln. nur indem du es in CSS versteckst! – Kratos

Zugang verschachtelte JSON als Schieber AngularJS

Antwort

Verwandte Themen