將css類添加到Angularjs中的標記元素

我有一個ToDo列表，我希望所有選中的元素在點擊「Strike marked」按鈕時都會被拖動。將css類添加到Angularjs中的標記元素

這是我的代碼的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>

這是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"; 
     }); 
    }; 
});

來源

2015-06-14 tanja

你不應該在你的任務的字符串todoText添加class屬性。你應該在striked布爾屬性，而不是添加到任務：

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

然後用這個布爾添加CSS類：

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

來源

2015-06-14 09:52:38

我們只有1秒difference..you 1個seconds..That的真棒打倒我.. –

您需要使用納克級來達到同樣的

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

代碼

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

Working Plunkr

來源

2015-06-14 09:52:39

謝謝pankajparkar – tanja

@tanja很高興幫助you..look在plukr，會給你更多更清晰的想法.. –

將css類添加到Angularjs中的標記元素

回答

相關問題