javascript - Add css class to marked elements in Angularjs -
i have todo list , want checked elements become striked when click on "strike marked" button.
this 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 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"; }); }; });
you shouldn't add class
property on string todotext
of task. should instead add striked
boolean property task:
$scope.strike = function() { angular.foreach($scope.todolist, function(x) { if (!x.done) x.striked = true; }); };
and use boolean add css class:
<span ng-class="{strike: x.striked}" ng-bind="x.todotext"></span>
Comments
Post a Comment