might
@might
javascript developer

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

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() - функция перезагрузки страницы.
Так вот, интересует как это можно реализовать без перезагрузки страницы.
Спасибо большое заранее!
  • Вопрос задан
  • 2582 просмотра
Решения вопроса 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.
Я изменил ответ - убрал лишний мусор, теперь все ок.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы