在角度ng-repeat中刪除類

我正在製作一個離子應用程序，我遇到了一些使用ng-Repeat中的列表項的css故障。我正在創建一個列表視圖，該列表視圖是使用ng-class='{large:$first}'使第一個元素自定義的，它使第一個縮略圖列表項目爲全尺寸。現在在s6上測試這個並沒有帶來任何問題，但是在s4 mini上測試顯示出我的錯誤，因爲無論我的自定義css如何，圖像都會壓縮成thumnail大小。我的名單看起來是這樣的：在角度ng-repeat中刪除類

<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重複的第一個項目，除去一類，即刪除item-thumbnail-left，使其不與我多麼希望干擾我的第一個項目顯示？

來源

2015-06-24 user3636907

呀basicly你與納克級的第一項添加類的方法相同。 ng-class可以有條件地添加/刪除一個類。所以你只需要創建一個相應地驗證爲真/假的條件，當條件爲真/假時刪除/添加你想要的類。 – Guinn

我對角度還是比較陌生的，我對它的工作原理還很模糊。我將如何去做這樣的事情。我似乎無法找到文檔中的任何內容，可以幫助 – user3636907

檢查andras Endre的答案，如果您只想讓第一個項目具有「item-thumbnail-left」類，則他的答案適用。 – Guinn

在你的情況我會申請一個CSS規則在所有情況下，當重複的項目是不是第一次：

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

來源

2015-06-24 09:15:00

完美的thanx很多！ – user3636907

是的，您可以將ng-show或ng-hide指令與範圍結合使用。例如：

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

其中firstItem是在角度控制器部件上聲明的全局範圍。在那裏你可以定義邏輯第一項應該發生什麼。假設您從集合中獲得第一個項目，那麼您可以爲該範圍指定一個特定值。

希望你明白了。

來源

2015-06-24 09:08:04

他不想顯示/隱藏某個元素，只是在ng-repeat中添加/刪除某個特定項目的類 – Guinn

你做正確，但你需要設置一個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>

來源

2015-06-24 09:20:16

非常感謝您的詳細解答！ – user3636907

在角度ng-repeat中刪除類

回答

相關問題