Remove class in angular ng-repeat
I am creating an ionic app and I am facing some css problems with a list item in ng-Repeat. I am creating a list view that adjusts slightly for the first item using ng-class='{large:$first}'
which makes the first item of the thumbnail list full size. Now testing this on s6 did not cause any problems, but testing on s4 mini shows my mistake that the image shows through itself into the size of the noise, regardless of my custom css. my list looks like this:
<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>
Is there a way, similar to adding a class to the first element in ng-repeat, to remove the class, that is, remove item-thumbnail-left
so that it doesn't interfere with the way I want my first element to be displayed?
source to share
You are doing it right, but you need to set the parameter false
to apply the class only if the first element is not specified.
ng-class="{'in':$first,'item-thumbnail-left': !$first}"
By doing !$first
, you are telling AngularJS to apply the class item-thumbnail-left
when the iteration is anything but the first element.
Try it yourself. We say that AngularJS applies the styling red
to everything except the first window and blue
the first.
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>
source to share
Yes, you can use ng-show or ng-hide directives in conjunction with scope. Something like:
ng-show="firstItem == 'someValue'"
where firstItem
is the global scope declared in the angular controller part. There you can define the logic of what should happen to the first element. Suppose you are getting the first item from a collection, then you can assign a specific value to that scope.
Hope you get this idea.
source to share