I've been searching for a solution to this problem for quite some time now, but nothing seems to work for me.
Recently, I started delving into Angular and managed to create a basic page with an ng-repeat function that iterates through an object.
My next goal is to update this object by making an AJAX call to an API. However, I'm facing difficulties in achieving this. It appears that the issue lies within the controller function: it's unable to modify an attribute of the same controller.
app.controller('StoreController', [ '$http', 'ajaxFactory',
function($http, ajaxFactory) {
this.products = products;
this.getProducts = function() {
/* This successfully empties the object AND the view upon click */
this.products = [];
ajaxFactory.getFamily2().then(function(data) {
/*
* Unfortunately, this does NOT work as expected; neither
* emptying the object nor the view upon click.
*/
/*
* I am certain that the AJAX call is functioning correctly,
* as I can see the results and even alert its content.
*/
this.products = data;
});
};
} ]);
Thank you in advance for your assistance.
FULL CODE: Html:
<div ng-app="catalogo">
<div ng-controller="StoreController as store">
<header class="text-center">
<h3>– An Angular Catalogue –</h3>
</header>
<div class="container" ng-controller="TotalPriceController as total">
<div class="row">
<div class="col col-xs-4"
ng-repeat="(key, product) in store.products"
ng-class="{ hero: key%2 === 0 }">
<div class="row">
<product-title></product-title>
</div>
<div class="row">
<product-gallery></product-gallery>
</div>
<div class="row">
<product-calculate></product-calculate>
</div>
<div class="row">
<product-tabs></product-tabs>
</div>
</div>
</div>
<div class="row">
<button ng-click="store.getProducts()">Click Here!</button>
<product-total></product-total>
</div>
</div>
</div>
JS:
(function() {
var app = angular.module('catalogo', [ 'store-directives' ]);
app.factory('ajaxFactory', function($http) {
var factory = {};
factory.getFamily2 = function() {
return $http.get("http://apigility-ds.gsanet.it/rpc").then(
function(result) {
return result.data;
});
}
return factory;
});
app.controller('TotalPriceController', function() {
this.totalPrice = 0;
this.calculateTotalPrice = function() {
this.totalPrice = 0;
for ( var x in products) {
var product = products[x];
if (typeof (product.num) !== 'undefined') {
this.totalPrice += (product.price * product.num);
}
}
};
});
app.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
app.controller('StoreController', [ '$http', 'ajaxFactory',
function($http, ajaxFactory) {
this.products = products;
this.getProducts = function() {
this.products = [];
ajaxFactory.getFamily2().then(function(data) {
this.products = data;
});
};
} ]);
app.controller('ReviewController', function() {
this.review = {};
this.addReview = function(product) {
product.reviews.push(this.review);
this.review = {};
};
});
var products = [ {
name : 'Balloons',
price : 7.99,
description : "A pack of colorful balloons",
images : [ "../img/balloons.jpg", "../img/balloons2.jpg" ],
specs : {
number : 10,
color : 'various'
},
reviews : []
}, {
name : 'Cards',
price : 3.99,
description : "Beautiful set of cards.",
images : [ "../img/cards.jpg", "../img/cards2.jpg" ],
specs : {
type : 'poker deck',
cards : 52
},
reviews : []
}, {
name : 'Watch',
price : 159.99,
description : "An amazing watch that will make you look cool.",
images : [ "../img/watchmaker.jpg", "../img/watchmaker2.jpg" ],
specs : {
color : 'black',
year : '2014',
brand : 'SWATCH'
},
reviews : []
} ];
})();