Skip to main content
15-Moonstone
January 18, 2022
Question

make only model item visible

  • January 18, 2022
  • 3 replies
  • 1965 views

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?

3 replies

24-Ruby III
January 18, 2022
14-Alexandrite
January 19, 2022

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);
}

 

GianVal15-MoonstoneAuthor
15-Moonstone
January 19, 2022

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?

21-Topaz I
January 19, 2022

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

 

 

GianVal15-MoonstoneAuthor
15-Moonstone
January 19, 2022

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

14-Alexandrite
January 19, 2022

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; 
}