gpt4 book ai didi

javascript - Angular Slick 添加文本标题

转载 作者:行者123 更新时间:2023-12-02 14:48:06 24 4
gpt4 key购买 nike

我正在学习使用 Angular slick 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",
];
})

最佳答案

只需将数据绑定(bind)到一个包含图像srccaption的数组,如下所示

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>

关于javascript - Angular Slick 添加文本标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36425416/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com