使用 ng-repeat将此 html 代码转换为角度

Convert this html code to angular using ng-repeat?

本文关键字：转换 代码 ng-repeat 将此 html 使用      更新时间：2023-09-26

我有这个HTML代码来创建图像滑块：

   <div id="wowslider-container1">
<div class="ws_images"><ul>
    <li><img src="data1/images/win_20150316_191218.jpg" alt="WIN_20150316_191218" title="WIN_20150316_191218" id="wows1_0"/></li>
    <li><img src="data1/images/win_20150316_191220.jpg" alt="WIN_20150316_191220" title="WIN_20150316_191220" id="wows1_1"/></li>
    <li><img src="data1/images/win_20150605_171919.jpg" alt="WIN_20150605_171919" title="WIN_20150605_171919" id="wows1_2"/></li>
    <li><img src="data1/images/win_20150605_171936.jpg" alt="WIN_20150605_171936" title="WIN_20150605_171936" id="wows1_3"/></li>
    <li><img src="data1/images/win_20150605_171938.jpg" alt="WIN_20150605_171938" title="WIN_20150605_171938" id="wows1_4"/></li>
    <li><img src="data1/images/win_20150723_142444_2.jpg" alt="WIN_20150723_142444 (2)" title="WIN_20150723_142444 (2)" id="wows1_5"/></li>
    <li><img src="data1/images/win_20150723_142444.jpg" alt="WIN_20150723_142444" title="WIN_20150723_142444" id="wows1_6"/></li>
    <li><img src="data1/images/win_20150723_142450.jpg" alt="WIN_20150723_142450" title="WIN_20150723_142450" id="wows1_7"/></li>
    <li><img src="data1/images/win_20150723_142455.jpg" alt="WIN_20150723_142455" title="WIN_20150723_142455" id="wows1_8"/></li>
    <li><img src="data1/images/win_20150723_142500.jpg" alt="WIN_20150723_142500" title="WIN_20150723_142500" id="wows1_9"/></li>
    <li><img src="data1/images/win_20150723_142525.jpg" alt="WIN_20150723_142525" title="WIN_20150723_142525" id="wows1_10"/></li>
    <li><img src="data1/images/win_20150723_142528.jpg" alt="WIN_20150723_142528" title="WIN_20150723_142528" id="wows1_11"/></li>
    <li><img src="data1/images/win_20150723_142530.jpg" alt="WIN_20150723_142530" title="WIN_20150723_142530" id="wows1_12"/></li>
    <li><img src="data1/images/win_20150723_142532.jpg" alt="WIN_20150723_142532" title="WIN_20150723_142532" id="wows1_13"/></li>
    <li><img src="data1/images/win_20150723_142535.jpg" alt="WIN_20150723_142535" title="WIN_20150723_142535" id="wows1_14"/></li>
    <li><img src="data1/images/win_20150723_142626.jpg" alt="WIN_20150723_142626" title="WIN_20150723_142626" id="wows1_15"/></li>
    <li><img src="data1/images/win_20150723_174159.jpg" alt="WIN_20150723_174159" title="WIN_20150723_174159" id="wows1_16"/></li>
    <li><a href="http://wowslider.com"><img src="data1/images/win_20150723_174210.jpg" alt="http://wowslider.com/" title="WIN_20150723_174210" id="wows1_17"/></a></li>
    <li><img src="data1/images/win_20150723_174229.jpg" alt="WIN_20150723_174229" title="WIN_20150723_174229" id="wows1_18"/></li>
</ul></div>
<div class="ws_bullets"><div>
    <a href="#" title="WIN_20150316_191218"><span><img src="data1/tooltips/win_20150316_191218.jpg" alt="WIN_20150316_191218"/>1</span></a>
    <a href="#" title="WIN_20150316_191220"><span><img src="data1/tooltips/win_20150316_191220.jpg" alt="WIN_20150316_191220"/>2</span></a>
    <a href="#" title="WIN_20150605_171919"><span><img src="data1/tooltips/win_20150605_171919.jpg" alt="WIN_20150605_171919"/>3</span></a>
    <a href="#" title="WIN_20150605_171936"><span><img src="data1/tooltips/win_20150605_171936.jpg" alt="WIN_20150605_171936"/>4</span></a>
    <a href="#" title="WIN_20150605_171938"><span><img src="data1/tooltips/win_20150605_171938.jpg" alt="WIN_20150605_171938"/>5</span></a>
    <a href="#" title="WIN_20150723_142444 (2)"><span><img src="data1/tooltips/win_20150723_142444_2.jpg" alt="WIN_20150723_142444 (2)"/>6</span></a>
    <a href="#" title="WIN_20150723_142444"><span><img src="data1/tooltips/win_20150723_142444.jpg" alt="WIN_20150723_142444"/>7</span></a>
    <a href="#" title="WIN_20150723_142450"><span><img src="data1/tooltips/win_20150723_142450.jpg" alt="WIN_20150723_142450"/>8</span></a>
    <a href="#" title="WIN_20150723_142455"><span><img src="data1/tooltips/win_20150723_142455.jpg" alt="WIN_20150723_142455"/>9</span></a>
    <a href="#" title="WIN_20150723_142500"><span><img src="data1/tooltips/win_20150723_142500.jpg" alt="WIN_20150723_142500"/>10</span></a>
    <a href="#" title="WIN_20150723_142525"><span><img src="data1/tooltips/win_20150723_142525.jpg" alt="WIN_20150723_142525"/>11</span></a>
    <a href="#" title="WIN_20150723_142528"><span><img src="data1/tooltips/win_20150723_142528.jpg" alt="WIN_20150723_142528"/>12</span></a>
    <a href="#" title="WIN_20150723_142530"><span><img src="data1/tooltips/win_20150723_142530.jpg" alt="WIN_20150723_142530"/>13</span></a>
    <a href="#" title="WIN_20150723_142532"><span><img src="data1/tooltips/win_20150723_142532.jpg" alt="WIN_20150723_142532"/>14</span></a>
    <a href="#" title="WIN_20150723_142535"><span><img src="data1/tooltips/win_20150723_142535.jpg" alt="WIN_20150723_142535"/>15</span></a>
    <a href="#" title="WIN_20150723_142626"><span><img src="data1/tooltips/win_20150723_142626.jpg" alt="WIN_20150723_142626"/>16</span></a>
    <a href="#" title="WIN_20150723_174159"><span><img src="data1/tooltips/win_20150723_174159.jpg" alt="WIN_20150723_174159"/>17</span></a>
    <a href="#" title="WIN_20150723_174210"><span><img src="data1/tooltips/win_20150723_174210.jpg" alt="WIN_20150723_174210"/>18</span></a>
    <a href="#" title="WIN_20150723_174229"><span><img src="data1/tooltips/win_20150723_174229.jpg" alt="WIN_20150723_174229"/>19</span></a>
</div></div><div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.com">slider</a> by WOWSlider.com v8.7</div>
<div class="ws_shadow"></div>
</div>

我如何使用角度ng重复来做同样的影响。 我使用图像滑块 http://wowslider.com有人可以帮忙吗？我如何使用角度ng重复来做同样的影响。我使用图像滑块 http://wowslider.com有人可以帮忙吗？这是我的角度控制器代码 

'use strict';
singleProduct.controller('singleProductController', ['$scope','$http','ConnectToSingleProductApi', function($scope ,$http,ConnectToSingleProductApi) {
    $scope.formData = {};
    // after loding index
    $scope.GetAllSingleProduct=function(){
        ConnectToSingleProductApi.getSingleProduct()
            .success(function(data) {
                console.log(data);
                $scope.allSingleProduct = data;
                console.log(data.length);
                console.log($scope.allSingleProduct);

            });
    }
}]);

这是我的角度服务：

angular.module('SingleProductService', [])
    // super simple service
    // each function returns a promise object
    .factory('ConnectToSingleProductApi', ['$http',function($http) {
        return {
            getSingleProduct : function() {
                return $http.get('/singleimages');
            },
        }
    }]);

像这样的东西

js 文件

...
.controler("youController", function ($scope){
var images = [
{
imgloc :  "data1/images/win_20150723_142530.jpg",
altText:  "WIN_20150316_191218", 
imgTitle= "WIN_20150316_191218", 
imgId="wows1_0"
},
{
imgloc :  "data1/images/win_20150723_142530.jpg",
altText:  "WIN_20150316_191218", 
imgTitle= "WIN_20150316_191218", 
imgId="wows1_1"
}, 
.. and so on ...
]
$scope.images = images;
}
...

在视图中

<div ng-controller="youController" class="ws_images">
<ul>
<li ng-repeat="image in images">
  <img ng-src="{{image.imgloc}}" alt="{{image.altText}}" title="{{image.imgTitle}}"/>
</li>

我希望这可以帮助你 bb

相关文章：