#3 Пишем Trello на AngularJS. Часть 3.

Всем привет. Мы продолжаем делать Trello, а именно, работать с карточками. Давайте для начала создадим новую фабрику, которая будет называться cardFactory. В ней будет идти взаимодействие с карточками.

angular.module('app').factory('cardFactory', function () {
  var service = {};

  var cards = [
    {
      id: 1,
      description: 'Fix bug in player',
      list_id: 1
    },
    {
      id: 2,
      description: 'Add feature with D3',
      list_id: 2
    },
    {
      id: 3,
      description: 'Learn AngularJS',
      list_id: 3
    }
  ];

  return service;
});

Service - это обьект с методами фабрики. cards - приватный массив в карточками, которые у нас уже есть. list_id - это id списка, к которому привязана карточка. Для того, чтобы понимать, к какому списку относится карточка, мы вводим понятие list_id. Теперь мы легко можем из нашего массива карточек вытащить карточки, у которых list_id = 1.

Теперь нам понадобится какой-то метод, который будет возвращать все карточки по выбраному списку.

service.getCards = function (list) {
  return _.filter(cards, { list_id: list.id });
}

getCards на вход принимает list. С помощью метода filter, мы выбираем все карточки списка.

Теперь давайте добавим ng-repeat, который будет выводить карточки.

<section id="lists-container"
         class="lists-container"
         ng-controller="listsCtrl as listsCtrl">
  <div class="row">
    <section class="list list-inline"
             ng-repeat="list in listsCtrl.lists">
      <h1>{{list.listName}}</h1>

      <div class="card"
           ng-repeat="card in listCtrl.getCards(list)">
        {{card.description}}
      </div>

      <a ng-click="listsCtrl" class="hand">
        <div class="remove remove-list"></div>
      </a>
    </section>

    <section class="list new-list list-inline">
      <form ng-submit="listsCtrl.addList()">
        <input type="text" ng-model="listsCtrl.listName"/>
      </form>
    </section>
  </div>
</section>

getCards - это метод, который вынимает карточки списка, поэтому логично, чтобы он относился к контроллеру списка. На вход мы передаем ему list.

В listCtrl добавим метод getCards, где вызовем getCards из фабрики.

angular.module('app').controller('listCtrl', function (listFactory, cardFactory) {
  this.removeList = function (list) {
    listFactory.removeList(list);
  }

  this.getCards = function (list) {
    return cardFactory.getCards(list);
  }
});

Для того, чтобы все работало, нам нужно заинджектить cardFactory. Как вы понимаете, мы опять не делаем никакой логики с данными в контроллере, а исключительно, пробрасываем метод в фабрику.

Также нужно не забыть подключить cardFactory в наш index.html.

Как мы видим, у нас вывелись карточки и у нас в каждом списке вывелось по карточке.

Теперь добавим возможность добавления собственной карточки.

<section id="lists-container"
         class="lists-container"
         ng-controller="listsCtrl as listsCtrl">
  <div class="row">
    <section class="list list-inline"
             ng-repeat="list in listsCtrl.lists">
      <h1>{{list.listName}}</h1>

      <div class="card"
           ng-repeat="card in listCtrl.getCards(list)">
        {{card.description}}
      </div>

      <a ng-click="listsCtrl" class="hand">
        <div class="remove remove-list"></div>
      </a>

      <section class="new-card">
        <form ng-submit="listCtrl.createCard(list)">
          <input type="text"
                 ng-model="listCtrl.cardDescription"
                 class="card-input"
                 placeholder="New card">
        </form>
      </section>
    </section>

    <section class="list new-list list-inline">
      <form ng-submit="listsCtrl.addList()">
        <input type="text" ng-model="listsCtrl.listName"/>
      </form>
    </section>
  </div>
</section>

в метод createCard мы передаем list, который мы хотим создать.

Давайте добавим метод createCard в наш listFactory.

this.createCard = function (list) {
  cardFactory.createCard(list, this.cardDescription);
}

В метод createCard мы будем передавать список в который мы хотим добавить карточку и cardDescription.

Теперь давайте добавим этот метод в cardFactory.

service.createCard = function (list, cardDescription) {
  cards.push({
    id: _.uniqueId('card_'),
    description: cardDescription,
    list_id: list.id
  });
};

В наш массив cards мы пушим новый обьект.

В браузере мы видим, что карточка у нас добавляется, но поле input не очистилось. Добавим в createCard очистку.

this.createCard = function (list) {
  cardFactory.createCard(list, this.cardDescription);
  this.cardDescription = '';
}

Вот мы добавляем карточки и они сразу же добавляются в нужный список.