javascript - 制作一个没有 ng-show 或 ng-hide 的 AngularJS "hide and show"解决方案

Question

想要基于下拉(选择)隐藏或显示 AngularJS 上的元素，但由于该页面是与 QlikSense 的混搭，因此来自 Qlik 的元素不能与 ng-show 很好地配合。我用 ng-show 尝试了这种方法:http://jsfiddle.net/3ernardo/EZbfM/873/但元素仅部分显示。所以我用CSS制作了一个基于子可见性的版本，现在元素可以正确显示，但问题是，当页面加载时，所有选项都是可见的，并且下拉列表没有选择任何选项。我需要这个下拉菜单像上一个选择了选项的下拉菜单一样工作，并且它是在加载时可见的正确元素。这是第二次尝试的 fiddle : 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

我也是一名 Qlik 开发人员，并且在 Controller 初始化之前渲染元素时遇到了类似的问题。我将以下内容作为类添加到有问题的对象中

 .hidden {
    visibility: hidden;
    }  

然后在元素上使用ng-hide="something"

我在 Angular Controller 中定义了一些内容，因此如果我将某些内容设置为 false，一旦加载 Angular ，它就会显示；如果我将某些内容设置为 true，它将保持隐藏状态。