0

自分用の最初の ToDo アプリを作成しようとしています。

後で仕事で必要になるので、イオンを使用したいと思います(経験を積むことができます)。

今-チェックボックスのリストである単純なto-doタスクを備えたアプリが次のように実装されています

<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 です)にスタイル「テキスト装飾:ラインスルー」を取得したいと思います。

スタイル属性を追加するにはどうすればよいですか? それはとても単純でなければなりませんが、私は正しい解決策を見つけることができません..

前もって感謝します。

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 に答える