cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Did you get called away in the middle of writing a post? Don't worry you can find your unfinished post later in the Drafts section of your profile page. X

make only model item visible

GianVal
15-Moonstone

make only model item visible

Hi, I want to make only a specified model item visible and make the rest of the model invisible. how to do this in JS?

6 REPLIES 6
VladimirN
24-Ruby II
(To:GianVal)

sebben
12-Amethyst
(To:GianVal)

Hi,

I noticed that when you try to hide the model and just want to show the modelItem it wont show up.

So what you have to do is first set the modelItems visible property to false and after a short time set it to true again like this:

 

$scope.showModelItem=function(){
  $scope.view.wdg["model-1"].visible =false;
  $scope.view.wdg["modelItem-1"].visible =false;
  $timeout(function () {
  $scope.view.wdg["modelItem-1"].visible =true;
  }, 10);
}

 

GianVal
15-Moonstone
(To:sebben)

Thank you. That's the goal. I suppose that this method can work, but I would prefer a JS promise/callback method. What do you think?

Hi @GianVal ,

here as additional informaiton to your issue. Here is a sample script which will set visibility for all modelItems containing some string and all other modelitems will be set to !value - means when setting is true the other items will set to false  and vice versa. Possibly it could be helpful:

 

//================================
$scope.setModelItemsVisibility=function(str,value){
 
  var wdgs=$scope.app.view.Home.wdg; 
  for(wdg in wdgs)
  { // console.warn(wdgs[wdg])
    if(hasWdgProp(wdgs[wdg],'idpath')) {
      if( wdg.indexOf(str) !=-1) { //console.log("this widget "+value+"::"+wdgs[wdg]['widgetName']+" is a modelitem");
                           $scope.setWidgetProp(wdg,'visible',value);
                                     $scope.$applyAsync();
                                   }
      else {
          console.log("widget NO "+value+"::"+wdgs[wdg]['widgetName']+" is a modelitem");
          $scope.setWidgetProp(wdg,'visible',!value);
                                     $scope.$applyAsync();
                }
    }
  }
};
//================================================================

 

and then later call e.g. in the modeLoad event when the model is loaded completely :

 

//when the modelis Loaded
$rootScope.$on('modelLoaded', function() { 
$scope.setModelItemsVisibility('inner',true);
})

here we will set the visibility to true of all modelItems when the name contains the string inner and all other modelitems will be set to false- invisible

 

 

Thank you! I can work on it with your advice.

Anyway, I'll try to explain to you what is my goal: I set up a dropdown menu (select) listing some model items. every time I click on one of these elements I want to only show the selected one, hiding the others. 

 

Any other advice? Can you explain me the function of $scope.$applyAsync(); command?

 

Many thanks

sebben
12-Amethyst
(To:GianVal)

Hi,

you can try it like this:

 

var array = ["modelItem-1","modelItem-2","modelItem-3"]
var title = []; 
for(var i = 0; i < array.length; i++)
{ title[i] = { display: array[i], value: array[i] }; }

$scope.$on("$ionicView.afterEnter", function (event) {
$scope.view.wdg["select-1"].list = title;
  
});
$scope.showModelItem=function(selectedModelItem){
  console.log($scope.view.wdg["select-1"].value);
  $scope.view.wdg["model-1"].visible =false; // you need this if not every part of your model has a modelItem
  for(var i = 0; i < array.length; i++){
  $scope.view.wdg[array[i]].visible =false;
  }
  $scope.view.wdg[$scope.view.wdg["select-1"].value].visible =true;   
}
Top Tags