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

时间：2016-04-23 16:28:07

标签： javascript angularjs

我有这个创建图像滑块的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-repeat来做同样的事情。我使用图像滑块http://wowslider.com 任何人都可以帮忙吗？ 我怎样才能使用角度ng-repeat来做同样的事情。我使用图像滑块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');
            },
        }
    }]);

1 个答案:

答案 0 :(得分：0)

像这样的东西

js file 

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

相关问题
最新问题