I can't understand why the change in the layout is not displayed, everything is ok in the console logs, in the local store too.
The layout is updated only after reloading the page or if you change the amount after at least 1 has been drawn.
this my HTML
<div class="container" ng-controller="cartController">
<div class="basket_wrapper">
<div class="basket_items">
<div class="triangle"></div>
<div class="basket_item" ng-repeat="obj in cart">
<a href="#" class="cancel" ng-click="remove(obj.id)"></a>
<div class="img_wrapper">
<img src="{{obj.img}}" alt="image">
</div>
<div class="basket_info">
<h5>{{obj.name}}</h5>
<div class="prise_and_amount">
<p class="price">{{obj.price}}$</p>
<div class="amount_wrapper">
<span class="min" ng-click="decreaseAmount(obj.id)">-</span>
<p class="amount">{{obj.amount}}</p>
<span class="pls" ng-click="increaseAmount(obj.id)">+</span>
</div>
</div>
</div>
</div>
<a href="@(_basket?.Url())" class="order_link">Order</a>
</div>
</div>
</div>
this my AngularJS
var myApp = angular.module('SomeName', []);
const _shopItemsKey = "itemsId";
const _itemUrl = "some url";
const _createOrderUrl = "some url";
myApp.controller('cartController', ['$scope', '$http', function ($scope, $http) {
$scope.getList = function () {
return JSON.parse(localStorage.getItem(_shopItemsKey) || "[]");
};
$scope.updateList = function () {
$scope.cart = $scope.getList();
console.log($scope.cart);
}
$scope.addItem = function (itemId) {
let obj = { id: itemId };
$scope.addToStorage(obj);
$scope.updateList();
};
$scope.remove = function (itemId) {
let arr = $scope.getList();
arr = arrayRemove(arr, arr.find(x => x.id == itemId));
localStorage.setItem(_shopItemsKey, JSON.stringify(arr));
$scope.updateList();
};
$scope.getPreviewList = function () {
let arr = $scope.getList();
return arr;
};
$scope.decreaseAmount = function (id) {
let arr = $scope.getList();
if (arr.find(x => x.id == id).amount - 1 > 0)
arr.find(x => x.id == id).amount--;
localStorage.setItem(_shopItemsKey, JSON.stringify(arr));
$scope.updateList();
};
$scope.increaseAmount = function (id) {
let arr = $scope.getList();
arr.find(x => x.id == id).amount++;
localStorage.setItem(_shopItemsKey, JSON.stringify(arr));
$scope.updateList();
};
$scope.getAllInfo = function (obj) {
let id = obj.id;
let arr = $scope.getList();
$http.get(_itemUrl + id).then(function (info) {
let payload = info.data;
console.log(info);
obj.price = payload.Price;
obj.img = payload.Img;
obj.name = payload.Name;
obj.amount = 1;
arr.push(obj);
localStorage.setItem(_shopItemsKey, JSON.stringify(arr));
$scope.updateList();
}, function (error) {
console.log(error);
});
};
$scope.addToStorage = function (obj) {
let arr = $scope.getList();
if (arr.find(x => x.id == obj.id) != undefined) {
arr.find(x => x.id == obj.id).amount++;
localStorage.setItem(_shopItemsKey, JSON.stringify(arr));
$scope.updateList();
} else {
$scope.getAllInfo(obj)
}
};
$scope.createOrder = function () {
//collect data from form using binding
//send Create order Request
}
$scope.updateList();
}]);
It seems that angular does not see changes in the array with data, therefore it does not display them in html. If someone knows the solution to the problem, I will be grateful for the help.