Coloniseur Coloniseur - 1 year ago 108
Javascript Question

Angular JS ng-repeat element does not update

I have to display a list of products and be able to click on them to get more informations about them.

My list of products is stored in a service named: "productsServices"

I got an html page who display all my products and an other who display details for 1 product. Each html page have their own controller.

When I update a product in my detail page, the changement is done in my productsServices but are not validated in my global product view.

(function ()
angular.module('app').service('productsServices', ['$http', '$q', ProductsServices])
that = this

that.products = /*arrayOfData*/;
that.getProducts = function () {
return that.products;

(function ()
angular.module('app').controller('ProductsController', ['$http', '$q', 'productsServices', ProductsController])

that = this
that.products = productsServices.getProducts;

that.showDetail = function (item) {
$state.go('menu.product', { myParam: item });

<!--Global HTML page-->
<ion-content id="content" class="has-header has-subheader" delegate-handle="myScroll">
<ion-item ng-repeat="product in that.products() track by product.ProductId" href="#" ng-click="that.showDetail({{product}})">
<div class="innerProd">
<img id="productPicture" name="productPicture" ng-src='data:image/png;base64,{{product.ThumbnailPhoto}}'></div>
<div class= "innerProd">
<ion-option-button class="button button-assertive"
<ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMoreData()" distance="100%">

So when I check the product sended in the "that.showDetail" method, it's the old product who is sended even if the product have been updated in the services.

I'm not english so sorry for language mistakes in my sentence ^^'

Thank in advance for your help ^^'

Answer Source

Ok I've find the ansewer to my question, I've replace the parameter that I'm sending to my "that.showDetail" function. I'm no more sending the object directly, but the index of my item.

<ion-item ng-repeat="product in that.products() track by product.ProductId" href="#" ng-click="that.showDetail({{$index}})">

I guess that angular doesn't update injected in a ng-click call ^^'

Thank you for your time guys

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download