Access nested JSON as a slider AngularJS

Question

I have a JSON file which has this structure:

 {    "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"},
    },

I would like to print the nested item "tips" as a slider with previous-next buttons.

Therefore I wrote this code in my HTML below:

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

and the tips-hide class 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;
        }
    }

But what I am getting is every element in the list one after the other, with the buttons on the bottom of each one of them.

ScreenShot below:

could you please make a screenshot so i can understand what's wrong — Kamel Mili
– Kamel Mili, Commented May 23, 2016 at 17:12

Fábio Luiz · Accepted Answer · 2016-05-23 17:14:39Z

ng-repeat on object can't be tracked by index (at least not in that way) I've changed few parts on code to simulate on code snippet, see if it helps.

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>

thank you for that! I just would like to do it without changing the controller. just by hiding it in css!

Collectives™ on Stack Overflow

Access nested JSON as a slider AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related