删除angular ng重复中的类

remove class in angular ng-repeat

本文关键字：angular ng 删除      更新时间：2023-09-26

我正在制作一个ionic应用程序，在ng Repeat中的一个列表项遇到了一些css问题。我正在使用ng-class='{large:$first}'为第一个元素创建一个有点自定义的列表视图，它使第一个缩略图列表项变为全尺寸。现在在s6上测试并没有带来任何问题，但在s4 mini上测试揭示了我的错误，即无论我的自定义css如何，图像都会将自己压缩为thummail大小。我的清单是这样的：

<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，这样它就不会干扰我希望第一个项目的显示方式？

在您的情况下，当重复项不是第一个时，我会在所有情况下应用css规则：

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

操作正确，但需要设置false参数，以便仅在未列出第一项时应用该类。

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

在执行!$first时，您告诉AngularJS在迭代不是第一个元素时应用item-thumbnail-left类。

你自己试试吧。我们告诉AngularJS将red样式应用于除第一个框之外的所有框，并将blue应用于第一个框。

function testCtrl($scope) {
    $scope.products = [1,2,3,4];
}
.blue {
    background: blue;
}
.red {
    background: red;
}
.box {
    width:80px;
    height: 80px;
    margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="testCtrl" ng-app>
    <div ng-repeat="p in products">
        <div ng-class="{'blue':$first,'red': !$first}" class="box"></div>
    </div>
</div>

是的，您可以将ng-show或ng-hide指令与作用域结合使用。类似于：

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

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

希望你明白。

相关文章：