Pierwsze zmagania z komponentami Ionic i AngularJS

Po skonfigurowaniu środowiska testowego przyszedł czas na stworzenie pierwszej testowej aplikacji. Na stronie domowej frameworka Ionic znajdziemy tutorial przeprowadzający nas przez proces stworzenia prostej aplikacji do zarządzania listami zadań, czyli ToDo app. Mógłbym przeklejać tutaj kod ale nie ma to najmniejszego sensu. Opiszę problemy z jakimi przyszło mi się zmierzyć i pomysły jakie pojawiły się podczas wykonywania samouczka.

Podróż w czasie

Możemy wyobrazić sobie moment, w którym aplikacja została wykonana przeze mnie w całości zgodnie z tutorialem. Dodam, że działa tak jak powinna, czyli umożliwia dodanie kolejnych projektów (osobnych list zadań) oraz dodawanie do każdego z projektów zadań. Przy okazji weekendu, gdzie odwiedziła mnie rodzina skompilowałem nawet gotowy plik .apk aby sprawdzić czy działa ona na różnych urządzeniach. I działa! Sukces.

Mimo to jest to uboga aplikacja. Posiada tylko boczny panel i listę zadań. Postanowiłem ją udoskonalić. A mianowicie umożliwić edycję nazw projektów i ich usuwanie oraz dodanie podobnych działań dla każdego z zadań.

Usuwanie projektów

W celu usuwania projektów przedstawionych w ten sposób:

Aby dodać mmożliwość usuwania skorzystamy z komponentu ion-delete-button dostępnego w pakiecie ion-list. W moim przypadku umieściłem przycisk w lewym górnym rogu odsłaniający przyciski usuwania przy każdym elemencie listy. Wygląda to w ten sposób

Aby to wykonać do kontrolera dodałem obiekt z danymi

$scope.data = {
    showDelete: false
};

Następnie przycisk w górnej belce

<div class="buttons">
    <button class="button button-icon icon ion-ios-minus-outline" ng-click="data.showDelete = !data.showDelete"></button>
</div>

Aktywator do listy oraz przycisk usuwający do ciele każdego z elementów listy

<ion-list show-delete="data.showDelete">
    <ion-item class="item-dark item-remove-animate" ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
        <ion-delete-button class="ion-close" ng-click="deleteProject($index)"></ion-delete-button>
        {{project.title}}
    </ion-item>
 </ion-list>

I metodę usuwającą projekt w kontrolerze

$scope.deleteProject = function(index) {
    $scope.projects.splice(index, 1);
    Projects.save($scope.projects);
}

Dzięki takim modyfikacjom jesteśmy w stanie usunąć elementy z listy. Efekt końcowy prezentuje się następująco:

W następnym poście postaram się przedstawić sposób na edycję nazwy każdego z projektów.