Question

我正在学习使用棱角分明https://www.npmjs.com/package/angularslick

为每张幻灯片添加一些自定义标语

我应该如何将文本数据放在每个活动幻灯片本身上？

<body ng-controller="MainController">
    <div class="col-md-9">           
      <slick autoplay="true" autoplaySpeed="500" fade="true" dots="true">
        <div ng-repeat="image in images">
          <img data-lazy="{{image}}">
          <div ng-repeat"caption in captions"></div>
        </div>
      </slick>
    </div>
</body>

app.js：

var app = angular.module('myApp', ['slick']);
app.controller('MainController', function($scope) {
  $scope.images = [
    "images/slider-banner1.png",
    "images/slider-banner2.png",
    ];

  $scope.captions = [
    "tagline for banner1",
    "tagline for banner2",
  ];
})

Answer 1

 <slick autoplay="true" autoplaySpeed="500" fade="true" dots="true">
    <figure ng-repeat="image in images">
     <img data-lazy="{{image}}">
  <figcaption ng-repeat"caption in captions">{{caption}}</figcaption>
</figure>
      </slick>

这就是你的答案，在这支笔中可以看到更好的方法

Pen for Slick

Answer 2

只需将数据绑定到包含图像src和caption的单个数组，就像这样

var app = angular.module('myApp', ['slick']);
app.controller('MainController', function($scope) {
  $scope.images = [
    {
      src: "images/slider-banner1.png",
      caption: "tagline for banner1"
    },{
      src: "images/slider-banner2.png",
      caption: "tagline for banner2",
    ];
})

现在您只需ng-repeat $scope.images就可以了：

<body ng-controller="MainController">
    <div class="col-md-9">           
      <slick autoplay="true" autoplaySpeed="500" fade="true" dots="true">
        <div ng-repeat="image in images">
          <img data-lazy="{{image.src}}">
          <span>{{image.caption}}</span>
        </div>
      </slick>
    </div>
</body>

Answer 3

这应该有效：

<body ng-controller="MainController">
<div class="col-md-9">           
  <slick autoplay="true" autoplaySpeed="500" fade="true" dots="true">
    <div ng-repeat="image in images">
      <img data-lazy="{{image}}">
      <div ng-bind="captions[$index]"></div>
    </div>
  </slick>
</div>

Angular Slick添加文字标题

3 个答案: