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 classproperty on string todotextof 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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -