Angular如何使用ng-repeat与离子

时间:2015-08-31 11:27:10

标签: javascript angularjs ionic-framework

in ionic有这个演示

<ion-list>
  <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
    {{playlist.title}}
  </ion-item>
</ion-list>

但是我正在使用ioic-material而我想重复这个

<a ng-repeat="shop in shops" href="#/app/shops" class="item item-thumbnail-left item-icon-right"  > 
                <img ng-src="{{img}}">
                <h2>{{title}}</h2>
                <p>{{subtitle}}</p></a>

这是商店 $scope.shops = [ { title: 'shop1', id: 1 , subtitle: 'Sport , Casual, Suits' , img: "img/material3.jpg.jpg"}, { title: 'shop2', id: 2 , subtitle: 'Suits & Shoes, ' , img: "img/material3.jpg.jpg"},
];
但生成的HTML我得到了。 (没有错误)

<div class="list">

    <!-- ngRepeat: shop in shops --><a ng-repeat="shop in shops" href="#/app/shops" class="item item-thumbnail-left item-icon-right">
                <img>
                <h2 class="ng-binding"></h2>
                <p class="ng-binding"></p>
                </a><!-- end ngRepeat: shop in shops --><a ng-repeat="shop in shops" href="#/app/shops" class="item item-thumbnail-left item-icon-right">
                <img>
                <h2 class="ng-binding"></h2>
                <p class="ng-binding"></p>
                </a><!-- end ngRepeat: shop in shops -->
        </div>

那么我做错了什么?

1 个答案:

答案 0 :(得分:2)

得到它我应该这样做:

<a ng-repeat="shop in shops" href="#/app/shops" class="item item-thumbnail-left item-icon-right"  >
                <img ng-src="{{shop.img}}">
                <h2>{{shop.title}}</h2>
                <p>{{shop.subtitle}}</p>
                </a>


而不是

<a ng-repeat="shop in shops" href="#/app/shops" class="item item-thumbnail-left item-icon-right"  > 
            <img ng-src="{{img}}">
            <h2>{{title}}</h2>
            <p>{{subtitle}}</p></a>