Question

我将数据存储在一个对象数组中，并用于在ngRepeat页面上创建一个列表。问题是对象中的一些值是null，我想隐藏它们的行而不是整个对象。我尝试在单个ngHide上使用<li>，但它不会折叠该行，因为它只是隐藏它而我不想通过函数或其他css将其高度降低到零我可以使用过滤器自动完成。

尽管我付出了最大努力，但我似乎无法编写一个自定义过滤器来隐藏空行并显示其他行。我曾经把它归结为false的值为null，但后来我删除了它以尝试别的东西并忘记了我是如何到达那里的（没有本地版本）。

这是我之前的一个问题的小提琴，但它有我试图过滤的所有部分。 http://jsfiddle.net/E2GB9/9/

数据格式：

function TypeCtrl($scope) {

$scope.styles = [
    {name: 'Example 1', h1:'32px', h2:'24px', p:'12px', className:'example1'},
    {name: 'Example 2', h1:'', h2:'24px', p:'12px', className:'example2'},
    {name: 'Example 3', h1:'24px', h2:'', p:'12px', className:'example3'},
    {name: 'Example 4', h1:'32px', h2:'24px', p:'', className:'example4'}];
}

html中的

ngRepeat：

<li ng-repeat="style in styles">
            <span>Name: {{style.name}}</span><br>
            <span>H1: {{style.h1}}</span><br>
            <span>H2: {{style.h2}}</span><br>
            <span>P: {{style.p}}</span><br>
            <button class="btn-small" type="submit" ng-click="$parent.appliedStyle=style.className">Apply {{style.name}}</button>
</li>

所以，如果style.h1 == null那么我只想隐藏那一行;同样适用于h2，p等。

Answer 1

ng-hide不会折叠该行的原因是每个 元素后面的。如果你写的话，它会起作用：

<p ng-hide="!style.h1">H1: {{style.h1}}</p>

（并且没有 ）

它也可以是<div>而不是（或任何块元素，或将样式设为display:block以强制换行。）

Answer 2

您可以使用带有ng-repeat的自定义过滤器。

function TypeCtrl($scope) {

$scope.styles = [
    {name: 'Example 1', h1:'32px', h2:'24px', p:'12px', className:'example1'},
    {name: 'Example 2', h1:'', h2:'24px', p:'12px', className:'example2'},
    {name: 'Example 3', h1:'24px', h2:'', p:'12px', className:'example3'},
    {name: 'Example 4', h1:'32px', h2:'24px', p:'', className:'example4'},
    {}];

$scope.checkNull = function(row)  {
    return (row.hasOwnProperty('name') || row.hasOwnProperty('h1')  
|| row.hasOwnProperty(' ')  || row.hasOwnProperty('p')  );
    }
}

代替row.hasOwnProperty（），你也可以使用下划线并检查对象的大小。

这不会显示最后一行，因为它是空白的。

ng-repeat in html

<ul class="unstyled">
        <li ng-repeat="style in styles | filter:search | filter:checkNull">
            <span>Name: {{style.name}}</span><br>
            <span>H1: {{style.h1}}</span><br>
            <span>H2: {{style.h2}}</span><br>
            <span>P: {{style.p}}</span><br>
            <button class="btn-small" type="submit" ng-click="$parent.appliedStyle=style.className">Apply {{style.name}}</button>
        </li>
    </ul>

AngularJS过滤器null键：来自ngRepeat列表的值行 - 存储在数组内对象中的数据

2 个答案: