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

Всем привет. Сегодня мы с вами продолжаем делать Trello и сегодня мы будем делать добавление и удаление списков.

Для этого давайте напишем ниже section

<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>
    </section>

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

Мы с вами добавили форму с атрибутом ng-submit. При отправление формы будем вызываться метод addList. Также мы добавили input с моделью.

Как мы видим в браузере, у нас появилась форма для добавления нового списка. И мы должны добавить метод addList в listsCtrl.

angular.module('app').controller('listsCtrl', function (listFactory) {
  console.log('listsCtrl');
  this.lists = listFactory.getLists();

  this.addList = function () {
    console.log('this.listName', this.listName);
    listFactory.addList(this.listName);
  };
});

Внутри метода addList мы вызываем метод из фабрики, так как мы не хотим делать никакие манипуляции с данными в контроллере. Все методы у нас будут только в фабриках. В addList передаем текущий listName.

Теперь когда мы вводим что-то в input у нас выводится в консоль введенное название. Теперь в listFactory нам нужно описать метод addList.

service.addList = function (listName) {
  lists.push({
    id: _.uniqueId('list_'),
    listName: listName
  })
};

Мы пишум в наш массив lists новый сгенерированный елемент. Id сгенерируем с помощью метода lodash _.uniqueId.

Если мы добавим список, то у нас сразу же добавляется новый елемент. Но мы видим, что модель у нас не очищается и данные в input не пропадают. Для того, чтобы это исправить мы можем просто присвоить пустую строку

this.addList = function () {
  listFactory.addList(this.listName);
  this.listName = '';
};

Теперь мы видим, что input сразу очищается и мы можем добавлять сколько угодно наших списков.

Теперь давайте реализуем удаление списков. Для этого добавим

<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>

      <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>

Так как у нас елемент а относится к логике каждого списка, то это немного не логично, что метод будет браться из listsCtrl. Мы, конечно, могли бы написать метод removeList в listsCtrl, но так, как это должен быть контроллер списка, а не списков, то давайте создадим его. Для этого напишем ng-controller

<section class="list list-inline"
         ng-repeat="list in listsCtrl.lists"
         ng-controller="listCtrl as listCtrl">

У нас есть доступ к listsCtrl и общим вещам в нем, например, метод добавления списка. Метод же удаления списка относится к конкретному списку, поэтому логичнее написать listCtrl и все операции, которые будут происходить с этим списком мы будем хендлить в его же контроллере. Давайте опишем listCtrl и подключим его в index.html.

angular.module('app').controller('listCtrl', function () {
  console.log('listCtrl');
});

Мы видим, что в консоли ctrl выстрелило 3 раза. Добавим метод removeList.

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

Опять же, в контроллере мы не работаем с данными. Удаление списка происходит только в factory.

Теперь давайте опишем метод в listFactory.

service.removeList = function (list) {
  _.pull(lists, list);
}

Для удаления у lodash есть отличный метод _.pull, который ищет в массиве данные, которые мы ему передали. Оно сразу удалит из массива этот елемент.

У нас появился крестик и при нажатии на него у нас удаляется список. Вот что мы реализовали в этом уроке.