制作不带ng-show或ng-hide的AngularJS“隐藏并显示”解决方案

Question

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>

Answer 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.