ng-class with ng-repeat – AngularJS

Hey everyone,

Just another quick AngularJS post. This one is for using ng-class with ng-repeat. The goal here is to have a class applied to the non-selected elements. To start with, we’ll chuck the following in our controller:

$scope.transmission = {
selected: null,
options: [
{
name: 'Any'
},			
{	
name: 'Manual'
},			
{
name: 'Automatic'
}			
]
};

Here we’re just creating a few random objects. To keep things simple we’re going with transmission types: a manual car, automatic or any. Next you’ll want to add the markup:

...
<div id='options'>
	<div class='options_wrapper'>
		<div ng-repeat='option in transmission.options' class='options' ng-class='{"line-through": transmission.selected != null && transmission.selected != $index}'>
			<div ng-click='transmission.selected = $index'>
				{{option.name}}
			</div>
		</div>
	</div>
</div>
...

Finally the class to be applied:

.line-through{
	text-decoration: line-through;
}

2 thoughts on “ng-class with ng-repeat – AngularJS

Leave a Reply