current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

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";
        });
    };
});
share|improve this question
up vote 1 down vote accepted

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>
share|improve this answer
    
we had only 1 seconds difference..you beated me by 1 seconds..That's awesome.. – Pankaj Parkar Jun 14 at 9:56
up vote 1 down vote

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

share|improve this answer
    
Thank you pankajparkar – tanja Jun 14 at 9:59
    
@tanja Glad to help you..look at the plukr that will give you more clearer idea.. – Pankaj Parkar Jun 14 at 10:00

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.