Question

我正在创建一个离子应用程序，我遇到了一些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>

Answer 1

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

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

Answer 2

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

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

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

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

＆＃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;

Answer 3

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

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

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

希望你明白这一点。

删除角度ng-repeat中的类

3 个答案: