使用Angular.js和jQuery转换时隐藏的元素

Question

我从基于引导程序的a page that I adapted获得了template，而且它的效果非常好。但是，当我尝试使用angular.js添加一个简单的过滤操作时，与jQuery的通常冲突开始出现。真正困扰我的是：

为什么我的角度构造元素会占用空间，但却看不到？

错误如下所示：

无益，控制台报告没有错误，检查员会显示他们应该在哪些元素的确切轮廓，但不是：

。 。 。和a stripped down version角度组件本身就可以正常工作。这是一个常见的角度/ jquery问题吗？无论如何，感谢您的帮助！

Answer 1

Is this a common angular/jquery issue?

没有！不可见列表背后的原因是因为你的main.css资产中.grid类的css定义。

罪魁祸首如下：

.grid li {
    display: block;
    float: left;
    padding: 7px;
    width: 33%;
    opacity: 0;
}

如您所见，列表显示为opacity: 0，使列表不可见。删除不透明度属性定义，这应该可以解决您的问题。

.grid li {
    display: block;
    float: left;
    padding: 7px;
    width: 33%;
}

ng-repeat指令定义的另一个注释。我认为如果将ng-repeat指令放在<li>标记中会更好，在您的情况下，重复的元素是<ul>。见下面的例子：

<ul class="grid effect-2" id="grid">
    <li  ng-repeat="record in dataz | filter:searchText"><h2>{{record.name}} - {{record.source}}</h2><!--<a href="{{record.subgiturl}}"><img src="images/{{record.image}}"></a>--></li>
</ul>