Ionic - set style to Checkbox-Text when checked - css

Question

I am trying to create a first ToDo-App for my own.
I want to use ionic, because we will need it later at work (so I can make some experiences).
Now - I have my app with simple to-do tasks, which is a list of checkboxes, implemented as
<ion-checkbox ng-repeat="task in activeProject.tasks"
ng-model="task.checked"
ng-change="toggleItemDisplay(task)">
{{ task.title }}
</ion-checkbox>
I can write something into the console with this "toggleItemDisplay"-Function, which is implemented in the controller
//Toggle the text-display on checkbox
$scope.toggleItemDisplay = function(task) {
if(task.checked == true) {
console.log(task.title);
} else {
console.log('not checked!');
}
}
I would like the text which is displayed next to the checkbox (-> it's the task.title) to get the style "text-decoration: line-through" when the checkbox is checked.
How can I add the style-Attribut? It must be so simple but I just can't find the right solution..
Thanks in advance.

Answer 1

Just add ng-class for a conditional CSS class
angular.module('example', ['ionic'])
.controller('c', ['$scope', function($scope) {
// Mock of your tasks
$scope.tasks = [
{ title : "test 1", checked : false },
{ title : "test 2", checked : true },
];
$scope.toggleItemDisplay = function(task) {
if(task.checked == true) {
console.log(task.title);
} else {
console.log('not checked!');
}
}
}]);
.task-done {
text-decoration: line-through;
}
<script src="http://code.ionicframework.com/1.0.0-beta.13/js/angular/angular.min.js "></script>
<script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.js"></script>
<script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js"></script>
<div ng-app="example">
<div ng-controller="c">
<ion-checkbox ng-repeat="task in tasks"
ng-model="task.checked"
ng-change="toggleItemDisplay(task)"
ng-class="{'task-done': task.checked}">
{{ task.title }}
</ion-checkbox>
</div>
</div>