Javascript 角度平滑添加文本标题_Javascript_Angularjs

Javascript 角度平滑添加文本标题

javascript angularjs

Javascript 角度平滑添加文本标题,javascript,angularjs,Javascript,Angularjs,我正在学习使用角滑膜为每张幻灯片添加一些自定义标语我应该如何在每个活动幻灯片上确定文本数据的范围 <body ng-controller="MainController"> <div class="col-md-9"> <slick autoplay="true" autoplaySpeed="500" fade="true" dots="true"> <div ng-repeat="image

我正在学习使用角滑膜为每张幻灯片添加一些自定义标语

我应该如何在每个活动幻灯片上确定文本数据的范围

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


{{caption}}

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


{{caption}}

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

这应该可以：

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

这应该可以：

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

只需将数据绑定到一个数组，该数组包含图像

src

和

标题

，如下所示

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

下面的

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


{{image.caption}

只需将数据绑定到一个数组，该数组包含图像

src

和

标题

，如下所示

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

下面的

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


{{image.caption}