Question

我正在尝试为自己创建第一个ToDo-App。

我想使用离子，因为我们以后会在工作中需要它（所以我可以做一些经验）。

现在 - 我的应用程序包含简单的待办事项，这是一个复选框列表，实现为

<ion-checkbox ng-repeat="task in activeProject.tasks"
              ng-model="task.checked"
              ng-change="toggleItemDisplay(task)">
    {{ task.title }}
</ion-checkbox>

我可以通过这个＆＃34; toggleItemDisplay＆＃34; -Function在控制台中写一些东西，它在控制器中实现

//Toggle the text-display on checkbox
$scope.toggleItemDisplay = function(task) {
    if(task.checked == true) {
        console.log(task.title);
    } else {
        console.log('not checked!');
    }
}

我希望复选框（＆gt;它的task.title）旁边显示的文字可以获得样式＆＃34; text-decoration：line-through＆＃34;选中复选框时。

如何添加样式-Attribut？它必须如此简单，但我无法找到正确的解决方案..

提前致谢。

Answer 1

只需为条件CSS类添加ng-class

angular.module('example', ['ionic'])
.controller('c', ['$scope', function($scope) {

// Mock of your tasks
$scope.tasks = [
   { title : "test 1", checked : false },
   { title : "test 2", checked : true },
];

$scope.toggleItemDisplay = function(task) {
    if(task.checked == true) {
        console.log(task.title);
    } else {
        console.log('not checked!');
    }
}
}]);

.task-done {
  text-decoration:  line-through;
}

<script src="http://code.ionicframework.com/1.0.0-beta.13/js/angular/angular.min.js "></script>
<script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.js"></script>
<script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js"></script>

<div ng-app="example">
  <div ng-controller="c">

    <ion-checkbox ng-repeat="task in tasks"
                  ng-model="task.checked"
                  ng-change="toggleItemDisplay(task)"
                  ng-class="{'task-done': task.checked}">
                  {{ task.title }}
    </ion-checkbox>
  </div>    
</div>

Ionic - 选中时将样式设置为Checkbox-Text

1 个答案: