Question

想要基于下拉列表（选择）在AngularJS上隐藏或显示元素，但由于该页面是与QlikSense的混搭，因此Qlik中的元素与ng-show不兼容。我用ng-show尝试了这种方法：http://jsfiddle.net/3ernardo/EZbfM/873/但元素只是部分显示。所以我已经使用CSS创建了一个基于子可见性的版本，现在元素已正确显示但问题是，当页面加载时，所有选项都可见，并且下拉列表没有选择任何选项。我需要这个下拉菜单才能像上一个选择了一个选项的工作一样工作，只需要在加载时显示正确的元素。这是第二次尝试的小提琴：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开发人员，在控制器初始化之前渲染元素时遇到了类似的问题。我将以下内容作为类添加到了令人反感的对象中

 .hidden {
    visibility: hidden;
    }

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

我在角度控制器中定义了一些内容，因此如果我将内容设置为false，它将在角度加载后显示，如果将内容设置为true，它将保持隐藏状态。

在没有ng-show或ng-hide

1 个答案: