我有一个 ToDo 列表，我希望当我点击“Strike marked”按钮时所有选中的元素都被选中。
这是我的代码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";
});
};
});
最佳答案
您不应在任务的字符串 todoText 上添加 class 属性。您应该改为向任务添加一个 striked bool 属性:
$scope.strike = function() {
angular.forEach($scope.todoList, function(x) {
if (!x.done) x.striked = true;
});
};
然后使用这个 bool 值添加 css 类:
<span ng-class="{strike: x.striked}" ng-bind="x.todoText"></span>
关于javascript - 将 css 类添加到 Angularjs 中的标记元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30827935/