0

Want to hide or show elements on AngularJS based on a drop-down (select), but since the page is a mashup with QlikSense the elements from Qlik doesn't work well with ng-show. I tried this approach with ng-show: http://jsfiddle.net/3ernardo/EZbfM/873/ but the elements are only partially displayed. So I've made a version based on child visibility with CSS, now the elements are properly displayed but the problem is that as the page loads all options are visible and the drop-down have no option selected. I need this drop-down to work like the previous one that had an option selected and just it's correct element visible on load. Here is a fiddle for this second attempt: https://jsfiddle.net/3ernardo/s6ycapb0/

<Style>
div.class1 div.child,
div.class2 div.child,
div.class3 div.child,
div.class4 div.child {
  display: none;
}

div.class1 div:nth-child(1),
div.class2 div:nth-child(2),
div.class3 div:nth-child(3),
div.class4 div:nth-child(4) {
  display: block;
}
</Style>
<div ng-app="">
  <select ng-model="visibility">
    <option value="class1" ng-selected="true">Red Class</option>
    <option value="class2">Green Class</option>
    <option value="class3">Blue Class</option>
    <option value="class4">Yellow Class</option>
  </select>

  <div ng-class="visibility">
    <div class="child">
      <p>Element from class 1.</p>
    </div>
    <div class="child">
      <p>Element from class 2.</p>
    </div>
    <div class="child">
      <p>Element from class 3.</p>
    </div>
    <div class="child">
      <p>Element from class 4.</p>
    </div>
  </div>
</div>
Bernardo Araujo
  • 27
  • 1
  • 10
  • "the elements are only partially displayed' What's not displaying? It looks complete to me... – Daniel Beck Feb 21 '18 at 20:19
  • The real elements come from QlikSense and unfortunately I cannot display them since they are on a server with few users allowed. But if you are familiar with Qlik mashup, the imported charts just won't display the whole content. – Bernardo Araujo Feb 21 '18 at 20:25
  • We need a [mcve]. Not possible to debug a problem we can't see. – Daniel Beck Feb 21 '18 at 20:25
  • I understand, but my intention is to make the second fiddle work, not to figure out the problem in the first one, since it is a limitation of Qlik mashup and not a problem in the angular code. – Bernardo Araujo Feb 21 '18 at 20:29
  • All that `ng-hide` does is add `display: none` to the element, which is the same thing you're doing manually in that second fiddle. I'm not familiar with Qlik but many plugins have issues working with hidden elements (because they can't read element sizes etc); the first thing I would try is to start with everything visible, wait for qlik to finish setting up whatever it's setting up, then hide the elements you need hidden. – Daniel Beck Feb 21 '18 at 20:40
  • have you tried `ng-if` ? Take a look at the differences between ng-show and ng-if and check if in QlikSense this approach will work. (https://stackoverflow.com/questions/19177732/what-is-the-difference-between-ng-if-and-ng-show-ng-hide) – Lucas_Santos Feb 21 '18 at 20:41
  • @daniel-beck When all elements start-up visible is possible to use ng-hide without the problem of partially display them. But how would I use this in a site where I need to start the page showing just one of the elements? – Bernardo Araujo Feb 21 '18 at 20:58
  • @Lucas_Santos Unfortunately those elements doesn't work at all with ng-if. They need all to load with the page or else they won't show – Bernardo Araujo Feb 21 '18 at 21:04
  • If my guess was correct that Qlik needs its elements to be visible while initing them, your choices are 1) cope with a brief moment of all elements visible before you hide the others; 2) temporarily position the elements offscreen during init; 3) Have Qlik init each element only when you need it to be visible, rather than initing all of them at once. – Daniel Beck Feb 21 '18 at 23:06

1 Answers1

1

I am a Qlik Developer also and had a similar problem with elements being rendered before the controller had initialised. I added the following as a class to the offending objects

 .hidden {
    visibility: hidden;
    }

and then used ng-hide="something" on the element

I defined something in my angular controller and so it would show once the angular was loaded if i set something to false and would remain hidden if i set something to true.

Alastair McDonald
  • 11
  • 1