Question

我有一个ToDo列表，我希望当我点击＆＃34; Strike标记为＆＃34;时，所有选中的元素都会被标记。按钮。

这是我的代码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";
        });
    };
});

Answer 1

您不应在任务的字符串<Window x:Class="ListBoxItemWithToggleButton.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <ListBox ItemsSource="{Binding ListItems}"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Button Width="16" Height="16" Content="C" Padding="0" Margin="0,0,5,0"></Button> <TextBlock Text="{Binding Path=Name}"></TextBlock> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid>上添加class属性。您应该在任务中添加todoText布尔属性：

striked

然后使用此布尔值添加css类：

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

Answer 2

您需要使用ng-class来实现相同的

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

<强>代码

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

Working Plunkr

将CSS类添加到Angularjs中的标记元素

2 个答案: