首页 > 开发 > HTML > 正文

angularjs如何把数组里的数据ng-repeat到html对应的位置中?

2017-09-09 13:56:11  来源: 网友分享

怎么样可以让bannerurl数组里的图片路径用ng-repeat到html里替换img的路径?
是用来做图片轮播的,由于CSS的限制,要repeat li标签才能够实现有多张图片轮播。但是我现在不知道该怎么样去在repeat

  • 标签时又替换图片路径。求各位前辈指导一下。

    HTML:

    <li ng-repeat="x in text"><img src="images/banner.jpg"></li>

    数组如下:

    [{"id": "01","imgurl": "images/banner_01.jpg", "bannerurl":[{      "bannerimgurl0": "images/banner_04.jpg",      "bannerimgurl1": "images/banner_04.jpg",      "bannerimgurl2": "images/banner_04.jpg",      "detailsimgurl": "images/banner_05.jpg"    }],"title": "安全椅","quantity": "10","cost": "896","status": "0"}]
  • 解决方案

    虽然不太明白你说的意思,但我猜应该是想这样吧:
    js,controller中

    function bannerController($scope){    $scope.banner = [{    "id": "01",    "imgurl": "images/banner_01.jpg",     "bannerurl":[{          "bannerimgurl0": "images/banner_04.jpg",          "bannerimgurl1": "images/banner_04.jpg",          "bannerimgurl2": "images/banner_04.jpg",          "detailsimgurl": "images/banner_05.jpg"        }],    "title": "安全椅",    "quantity": "10",    "cost": "896",    "status": "0"    }]}

    html中相应的controller下

    <div ng-controller="bannerController">    <ul ng-repeat="(name,url) in banner[0].bannerurl[0]">        <li>            <img src="{{url}}">        </li>    <ul></div>

    可以看下文档,这部分是很基础的内容,希望是你想要的效果