Как такое переписать на angular?

Question

[Максим]

1. Есть блоки вида:

<div ng-repeat="disk in disks | filter:search" class="product-block {{disk.Genre}}">
        <img id="{{disk.ID}}_img" src="img/{{disk.Image}}" alt="">
        <h2 id="{{disk.ID}}_group">{{disk.Author}}</h2>
        <p><b>Альбом</b> <span id="{{disk.ID}}_albom">{{disk.Album}}</span></p>
        <p><b>Год</b> <span id="{{disk.ID}}_data">{{disk.Date}}</span></p>
        <p><b>Цена</b> <span id="{{disk.ID}}_sum">{{disk.Price}}</span></p>
        <a href="" id="{{disk.ID}}">Заказать</a>
    </div>

Как сделать на angular так, чтобы при нажатии "заказать" парсились данные товара и сохранялись в localstorage. Сделал пока только на нативном js через onclick="order(this);" и через document.getElementById(el.id+'...').innerText паршу данные. Но может можно как-то по-другому сделать? Просто на странице ещё есть "кол-во товара в корзине" и "цена", а если делать так, как я сейчас делаю, то данные в этих полях обновляются только после перезагрузки страницы.
2. Товары, добавленные в корзину, храню в localstorage, так вот: как его очистить, чтобы данные на странице обновились без перезагрузки страницы?
3. При нажатии "удалить" на товар в корзине срабатывает onclick вот с такой вот функцией:

function del(el){
    for (var i=0; i < orderList.length; i++) {
        if (orderList[i].ID == el.id) {
            delete orderList[i];
            orderList.sort();
            orderList.pop();
            localStorage.orderList = JSON.stringify(orderList);
//            reloader();
        }
    }
}

То есть удаляется конкретный объект из массива и localstorage сохраняется с новыми данными.
reloader() - функция перезагрузки страницы.
Так вот, интересует как это можно реализовать без перезагрузки страницы.
Спасибо большое заранее!

Answer 1

[Никита Гущин]

Как сделать на angular так, чтобы при нажатии "заказать" парсились данные товара

У вас уже есть все данные в disks. Зачем их парсить?

1. Используйте ngClass,ngSrc:
Вместо:

<div ng-repeat="disk in disks | filter:search" class="product-block {{disk.Genre}}">

<img id="{{disk.ID}}_img" src="img/{{disk.Image}}" alt="">

2. Уберите все эти ID. Это не angular way.

3. Если Вам нужна кнопка - используйте кнопку, а не ссылку:
Вместо:
<a href="" id="{{disk.ID}}">Заказать</a>
Надо:
<button type="button">Заказать</button>

4. Используйте ngClick директиву:

<button type="button" ng-click="order(disk)">Заказать</button>

5. Для использования localstorage я рекомендую использовать специальный сервис (можно взять этот).

6. Сохранение
В контроллере:

// Где-то внутри Вашего контроллера
// $scope.orderList - список заказов
$scope.order =  function(disk) {
    // Добавляем заказ. Будет выглядеть примерно так:
    $scope.orderList.push(disk);
}

7.

Товары, добавленные в корзину, храню в localstorage, так вот: как его очистить, чтобы данные на странице обновились без перезагрузки страницы?

$scope.clearAllOrders = function() {
    $scope.orderList.length = 0;
}

8. При удалении аналогично - используйте Ваш контроллер и ngClick:

<button type="button" ng-click="del(disk)">Отменить заказ</button>

В контроллере:

// Где-то внутри Вашего контроллера
$scope.del=  function(disk) {
    // Удаляем заказ. Будет выглядеть примерно так:
    // Получаем индекс диска в массиве $scope.orderList
    // Будьте внимательные - поиск идет по ссылке, а не по значению
    var diskIndex = $scope.orderList.indexOf(disk) ;
    $scope.orderList.splice(diskIndex,1);
}

9.

То есть удаляется конкретный объект из массива и localstorage сохраняется с новыми данными.
reloader() - функция перезагрузки страницы.
Так вот, интересует как это можно реализовать без перезагрузки страницы.

Нормально через сервисы организуйте структуру данных и сделайте биндинги - все остальное за вас сделает ангуляр.
Вам подойдет watch:

// $scope.orderList - массив заказов
$scope.$watch('orderList',function(nv,ov){
   localStorageService.set('ключ',angular.toJson(nv));
});

Получается связь scope.orderList -> localStorage и все синхронизировано

UPD2.
Я изменил ответ - убрал лишний мусор, теперь все ок.

Comments

[Максим]

хм, ругается на push, пишет в консоле TypeError: Cannot read property 'push' of undefined. Так же хотелось бы уточнить что писать вместо "ключ" в localstorage? Версия angular 1.3.3

[Никита Гущин]

might: Вам нужно определить $scope.orderList в Вашем контроллере. Я так понимаю, что он в первый раз должен загружаться из localstorage. Рекомендую сразу сделать сервис для заказов ("OrderService") и поместить всю логику туда.

Насчет ключа - что угодно. Представляйте localstorage как массив ключ-значение.

[Максим]

iNikNik: я, наверное, уже надоел) но я видимо что-то делаю не так, у меня не получается определить $scope.orderList. Только так $scope.orderList = [], не кидает ошибку, но зато в массив не записываются данные.

[Никита Гущин]

might: ну в самом простом случае так и надо. Можете получить из local storage:

$scope.orderList = angular.fromJson(localStorageService.get('ключ')) || [];