使用ng-repeat

时间:2018-02-06 11:36:01

标签: javascript css angularjs carousel

我想用滑动功能显示我的json数据。这是我想要做的设计。我看到旋转木马是用于滑动图像,但我不知道如何实现这一点。任何帮助都会很棒。

My design

这是示例代码。

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.myDatas = [{
      Paramnames: "Travel Material",
      options: [{
          name: "Newspaper"
        },
        {
          name: "Magazine"
        },
        {
          name: "Book"
        }
      ]
    },
    {
      Paramnames: "Safety & Security",
      options: [{
          name: "Health"
        },
        {
          name: "Private Policy"
        },
        {
          name: "Flight Disruption"
        }
      ]
    }
  ];
});
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="col-sm-3" ng-repeat="myData in myDatas">
    <p class="m-t-xs font-bold"><strong>{{myData.Paramnames}}  </strong></p>
    <div class="col-sm-8" ng-repeat="myOptions in myData.options">
      <p class="m-t-xs font-bold">{{myOptions.name}}
      </p>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

我终于找到了我的问题的答案。我认为这可能有助于我使用angular-slick指令它太酷了。 http://vasyabigi.github.io/angular-slick/