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

我已经从一个基于引导的，它大多工作得很好。然而，当我尝试使用angular.js添加一个简单的过滤操作时，与jQuery的常见冲突开始出现。真正困扰我的是：

为什么我的棱角构造元素占用空间，但不可见

错误如下所示：

毫无帮助的是，控制台没有报告任何错误，并且检查器显示了元素的确切轮廓，这些元素应该在哪里，但不是：

。角度分量的平均值本身就可以很好地工作。这是常见的angular/jquery问题吗？无论如何，谢谢你的帮助

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指令放在

标记中，在您的例子中，repeated元素是

。见下例：

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

{{record.name}-{{record.source}

您是否能够找到占用空间的元素是。您可以在上面的下图中看到，它在chrome inspector中显示为一系列

元素。但即使使用z索引操作，它们也不可见。