Add css class to marked elements in Angularjs

Question

I have a ToDo list and I want that all checked elements become striked when I click on the "Strike marked" button.

This is my code index.html

 <!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <style>
        .strike {
    text-decoration: line-through;
        }
    </style>
</head>

<body ng-app="myApp" ng-controller="todoCtrl">
<h2>My Todo List</h2>

<div ng-repeat="x in todoList">
    <input type="checkbox" ng-model="x.done"><span  ng-class="" ng-bind="x.todoText"></span>
</div>

<p>

    <button ng-click="strike()">Strike marked</button>
</p>


<script src="myNoteCtrl.js"></script>
</body>
</html>

And this is myNoteCtrl.js

var app = angular.module('myApp', []); 
app.controller('todoCtrl', function($scope) {
    $scope.todoList = [{todoText:'Clean House', done:false},{todoText:'Clean House2', done:false}];



        $scope.strike = function() {
        var oldList = $scope.todoList;
        angular.forEach(oldList, function(x) {
            if (!x.done) x.todoText.class="strike";
        });
    };
});

JB Nizet · Accepted Answer · 2015-06-14 10:32:29Z

1

You shouldn't add a classproperty on the string todoTextof your task. You should instead add a striked boolean property to the task:

$scope.strike = function() {
    angular.forEach($scope.todoList, function(x) {
        if (!x.done) x.striked = true;
    });
};

And then use this boolean to add the css class:

<span ng-class="{strike: x.striked}" ng-bind="x.todoText"></span>

edited Jun 14, 2015 at 10:32

answered Jun 14, 2015 at 9:52

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankaj Parkar · Accepted Answer · 2015-06-14 09:58:36Z

1

You need to use ng-class to achieve the same

ng-class="{isStriked : x.done}"

Code

$scope.strike = function() {
    var oldList = $scope.todoList;
    angular.forEach(oldList, function(x) {
      x.isStriked = x.done;
    });
};

Working Plunkr

edited Jun 14, 2015 at 9:58

answered Jun 14, 2015 at 9:52

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

1 Comment

Pankaj Parkar Over a year ago

@tanja Glad to help you..look at the plukr that will give you more clearer idea..

Collectives™ on Stack Overflow

Add css class to marked elements in Angularjs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related