删除角度ng-repeat中的类

时间:2015-06-24 08:57:44

标签: javascript angularjs ionic

我正在创建一个离子应用程序,我遇到了一些css麻烦,其中包含ng-Repeat中的列表项。我正在使用ng-class='{large:$first}'创建一个为第一个元素定制的列表视图,这使得第一个缩略图列表项完整。现在在s6上测试这个问题并没有带来任何问题,但是对s4 mini的测试揭示了我的错误,因为无论我的自定义css如何,图像都会压缩成thumnail大小。我的清单看起来像这样:

<ion-view view-title="World">
  <ion-content>
  <ion-refresher on-refresh="doRefresh()"></ion-refresher>
    <ion-list>
      <ion-item ng-class='{in:$first}' class="item-remove-animate item-thumbnail-left item-icon-right wrap" ng-repeat="world in worlds" type="item-text-wrap" href="#/app/world/{{world.id}}">
        <img ng-src="http://saharasystems.co.za{{world.imageLarge}}">
        <h2 ng-bind-html="world.title"></h2>
        <p ng-bind-html="world.created"></p>
        <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

是否有一种方法,类似于在ng-repeat中为第一项添加一个类,以删除一个类,即删除item-thumbnail-left,以便它不会干扰我希望我的第一个项目显示的方式? / p>

3 个答案:

答案 0 :(得分:4)

在你的情况下,当重复的项目不是第一个时,我将在所有情况下应用css规则:

<ion-item ng-class="{'in':$first,'item-thumbnail-left': !$first}">
   ...
</ion-item>

答案 1 :(得分:2)

您正在正确执行此操作,但只有在未列出第一项时才需要设置false参数才能应用该类。

ng-class="{'in':$first,'item-thumbnail-left': !$first}"

当迭代是第一个元素时,你正在告诉AngularJS应用!$first类。

亲自尝试一下。我们告诉AngularJS将item-thumbnail-left样式应用于除第一个框之外的所有内容,并将red应用于第一个框。

&#13;
&#13;
blue
&#13;
function testCtrl($scope) {
    $scope.products = [1,2,3,4];
}
&#13;
.blue {
    background: blue;
}
.red {
    background: red;
}
.box {
    width:80px;
    height: 80px;
    margin:5px;
}
&#13;
&#13;
&#13;

答案 2 :(得分:0)

是的,您可以将ng-show或ng-hide指令与范围结合使用。类似的东西:

ng-show="firstItem == 'someValue'"

其中firstItem是在角度控制器部件上声明的全局范围。在那里,您可以定义第一项应该发生的逻辑。假设您从集合中获取第一个项目,那么您可以为该范围分配特定值。

希望你明白这一点。