template data update

[bknill]

Hi,

I've added a few variables into the template because I want to update more than name i.e.

<div  class="carousel-item" ng-click="vm.onSelect({item:vm.ngModel})">
    <div class="circle">
        <span ng-bind="::vm.ngModel.title"></span><br>
    </div>
  <div class="scenes" ng-show="::vm.ngModel.scenes.length > 0">
    <i class="icon ion-aperture"></i><span ng-bind="::vm.ngModel.scenes.length"></span>
  </div>
</div>

And I update as such

      $scope.carouselData.length = 1;
      Entities.locations.forEach(function(location){$scope.carouselData.push(location)});
      $scope.$broadcast('a-carousel.arrayupdated', 'carousel-1');

However when the carousel gets updated the new ngModel.scenes.length or ::vm.ngModel.title are not being updated, the old ones remain (I can trace that the $scope.carouselData is getting the new data)

However if I add a whole new item it's fine.

Any way to update the values in the template?

[sebelga]

Hi, Can you post the whole Controller + Html view where you have placed your carrousel?

[bknill]

Carousel is at the top

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <div id="carousel" class="carousel-wrapper">
      <a-carousel
        carousel-options="::carouselOptions"
        array-provider="::carouselData"
        on-select="onSelectLocation(item)">
      </a-carousel>
    </div>

The carousel element in the controller

   $scope.$watch(function() { return Entities.locations }, function() {
     updateCarousel()
    }, true);

    activateCarousel();

    function activateCarousel() {
        $scope.carouselData = [{title: 'New Location +',button: true}];
        $scope.carouselOptions = {
          template      : 'templates/carousel-location.html',
          carouselId: 'carousel-1',
          align: 'left',
          selectFirst: false,
          centerOnSelect: false
      }
    };

    function updateCarousel(){
      $scope.carouselData.length = 1;
      Entities.locations.sort(function(a,b){return new Date(b.date) - new Date(a.date);});
      Entities.locations.forEach(function(location){$scope.carouselData.push(location)});
      $scope.$broadcast('a-carousel.arrayupdated', 'carousel-1');
    }

The data is coming from a Service. Not sure if that's an issue?

[sebelga]

Not sure but maybe you're losing your carouselData reference by setting its length to 1.

Try replacing updateCarousel() function with this

function updateCarousel() {
    var i = $scope.carouselData.length;
    while(i) {
        $scope.carouselData.pop();
        i--;
    }
    Entities.locations.sort(function(a,b){return new Date(b.date) - new Date(a.date);});
    Entities.locations.forEach(function(location){$scope.carouselData.push(location)});
    $scope.$broadcast('a-carousel.arrayupdated', 'carousel-1');

}

[bknill]

Hmm thanks doesn't seem to have made a difference. This function updateCarousel() is being called every time the data changes but the changes aren't making it to the template. Is there any way to force a refresh of the template?

[calebarcher]

@bknill Hi, i'm currently facing this issue. Did you find a solution to this problem? I've been on it all day @sebelga do you have any other suggestions? Thanks. Any suggestion from you guys will be much appreciated