Dependent slideboxes and race conditions

ionic-v1
1

I have a number of slideboxes in a view. The first slidebox has several possible values and the second is dependent on the selected value of the first.

I’ve tried the following code to try and get the content on the page to update nicely but there seems to be some kind of race condition preventing proper rendering:

  $scope.beacon = {};

  $scope.missions = missions.results
  $scope.platforms = platforms.results
  $scope.regions = regions.results

  // set up the initial levels value - this will change as users scroll through missions
  $scope.levels = $scope.missions[0].levels

  $ionicSlideBoxDelegate.update();

  // Called when the form is submitted
  $scope.createBeacon = function() {
    $scope.beacon = BeaconService.save({
      mission   : UtilsService.getObjectAsPointer( 'missions', $scope.missions[$ionicSlideBoxDelegate.$getByHandle('mission-selector').currentIndex()].objectId ),
      fireteam  : $ionicSlideBoxDelegate.$getByHandle('fireteam-selector').currentIndex() + 1,
      platform  : UtilsService.getObjectAsPointer( 'platforms', $scope.platforms[$ionicSlideBoxDelegate.$getByHandle('platform-selector').currentIndex()].objectId ),
      region    : UtilsService.getObjectAsPointer( 'regions', $scope.regions[$ionicSlideBoxDelegate.$getByHandle('region-selector').currentIndex()].objectId )
    })
  };

  $scope.missionChanged = function( index ) {
    $scope.levels = $scope.missions[index].levels;
    $ionicSlideBoxDelegate.$getByHandle('level-selector').update();
    
  }

I’ve also tried replacing the missingChanged function with this to no avail:

  $scope.missionChanged = function( index ) {
    $scope.levels = $scope.missions[index].levels;
    setTimeout(function() {
      $ionicSlideBoxDelegate.$getByHandle('level-selector').update();
    }, 1000);
    
  }

I’ve even managed to record a couple of gifs to show the behavioural oddities:

  1. This one shows the version without the timeout: http://recordit.co/rkhwLO2YUG
  2. This one shows the version with the timeout: http://recordit.co/ePbDpP5Y79

Worth mentioning a few things in case it has an impact; All “Missions” except Crucible have one or more level. Aside from Crucible, you should always see a level in the second slidebox.

2

Lil’ bump for visibility :slight_smile:

3

Thought I’d note one possible solution I’ve found in case it helps anyone. Visually it’s not perfect but for now, it gets the job done.

  $scope.missions = missions.results
  $scope.platforms = platforms.results
  $scope.regions = regions.results
  $scope.levels = $scope.missions[0].levels

  $scope.beacon = {};

  // Called when the form is submitted
  $scope.createBeacon = function() {
    BeaconService.save({
      mission   : $scope.missions[$ionicSlideBoxDelegate.$getByHandle('mission-selector').currentIndex()].objectId,
      level     : $scope.levels[$ionicSlideBoxDelegate.$getByHandle('level-selector').currentIndex()].objectId,
      fireteam  : $ionicSlideBoxDelegate.$getByHandle('fireteam-selector').currentIndex() + 1,
      platform  : $scope.platforms[$ionicSlideBoxDelegate.$getByHandle('platform-selector').currentIndex()].objectId,
      region    : $scope.regions[$ionicSlideBoxDelegate.$getByHandle('region-selector').currentIndex()].objectId,
    }).then(function( response ) {
      $state.go('tabs.beacon-detail', {'beaconId' : response.objectId});
    })
  };

  $scope.$watch('levels', function() {
    $ionicSlideBoxDelegate.$getByHandle('level-selector').slide(0);
    $ionicSlideBoxDelegate.$getByHandle('level-selector').update();
  });

  $scope.updateMission = function( index ) {
    var levels = $scope.missions[$ionicSlideBoxDelegate.$getByHandle('mission-selector').currentIndex()].levels;
    $scope.levels = levels ? levels : [];
  }

  $ionicSlideBoxDelegate.update();

The important bit is:

     $scope.$watch('levels', function() {
        $ionicSlideBoxDelegate.$getByHandle('level-selector').slide(0);
        $ionicSlideBoxDelegate.$getByHandle('level-selector').update();
      });
    
      $scope.updateMission = function( index ) {
        var levels = $scope.missions[$ionicSlideBoxDelegate.$getByHandle('mission-selector').currentIndex()].levels;
        $scope.levels = levels ? levels : [];
      }

This sets a watch on the $scope.levels to move the levels slider back to position 0 and then update it each time the mission slider is changed by the user.

As mentioned, this is still pretty clunky in the interface.

Any other options I should experiment with?