访问嵌套的 JSON 作为滑块 AngularJS答案

【问题标题】：Access nested JSON as a slider AngularJS访问嵌套的 JSON 作为滑块 AngularJS
【发布时间】：2016-05-27 00:00:27
【问题描述】：

我有一个具有这种结构的 JSON 文件：

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

我想将嵌套项目 "tips" 打印为带有上一个-下一个按钮的滑块。

因此，我在下面的 HTML 中编写了这段代码：

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

和 CSS 中的 tips-hide 类：

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


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

        li {
            display: block;
        }
    }

但我得到的是列表中的每个元素一个接一个，每个元素的底部都有按钮。

截图如下：

【问题讨论】：

能否请您截图，以便我了解问题所在
看起来像一个 CSS 问题。请提供更多 CSS :)
我添加了更多细节

标签： html css angularjs json scroll

【解决方案1】：

对象上的 ng-repeat 不能被索引跟踪（至少不是那样）我已经更改了代码的一些部分以在代码 sn-p 上进行模拟，看看是否有帮助。

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>

【讨论】：

谢谢你！我只想在不更改控制器的情况下这样做。只需将其隐藏在 css 中！