How to rewrite this in angular?

Question

JavaScript

1. There are blocks of the form:

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

How to make in angular so that when you click "order", product data is parsed and stored in localstorage. I have done so far only on native js via onclick="order(this);" and through document.getElementById(el.id+'...').innerText I scavenge the data. But maybe you can do something differently? It's just that the page still has "amount of goods in the cart" and "price", and if you do it the way I'm doing now, then the data in these fields is updated only after the page is reloaded.
2. I store the goods added to the cart in localstorage, and so: how to clear it so that the data on the page is updated without reloading the page?
3. When you click "delete" on a product in the cart, onclick is triggered with the following function:

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();
        }
    }
}

That is, a specific object is removed from the array and localstorage is saved with new data.
reloader() - page reload function.
So, I'm interested in how this can be implemented without reloading the page.
Thank you very much in advance!

Answer 1

How to make in angular so that when you click "order" product data is parsed

You already have all the data in disks. Why parse them?
Instead of:
Instead of:
Must:
In Controller:

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

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

In controller:

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

That is, a specific object is removed from the array and localstorage is saved with new data.
reloader() - page reload function.
So, I'm interested in how this can be implemented without reloading the page.

Normally, through services, organize the data structure and make bindings - everything else will be done for you by angular.
Watch will suit you:

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

I changed the answer - removed the extra garbage, now everything is ok.