0

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

我想使用ionic，因为我们以后工作中会用到它（这样我可以做一些经验）。

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

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

我可以用这个在控制器中实现的“toggleItemDisplay”功能在控制台中写入一些东西

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

我希望复选框旁边显示的文本（-> 它是 task.title）在选中复选框时获得样式“text-decoration：line-through”。

如何添加样式属性？它一定很简单，但我找不到正确的解决方案..

提前致谢。

4

1 回答 1

0

只需添加ng-class一个条件 CSS 类

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>

于 2014-12-12T14:04:57.813 回答