2

I have my data stored in an array of objects and it is being used to create a list on the page with ngRepeat. The problem is that some of the values within the object are null and I want to hide just their line but not the whole object. I tried using ngHide on the individual <li>'s but it doesn't collapse the row since its just hiding it and I don't really wanna reduce its height to zero through a function or additional css if I can just use the filter to do it automagically.

Despite my best efforts I cannot seem to write a custom filter that will hide the null rows and show the others. I once had it to the point of returning false for the value if null but then I deleted it to try something else and forgot how I had gotten there (ugh no local versioning).

Here is a fiddle from a previous question of mine but it has all the pieces I am trying to filter. http://jsfiddle.net/E2GB9/9/

Format of the data:

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'}];
}

ngRepeat in the html:

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

So, if style.h1 == null then I want to hide that row only; same for h2, p and so on.

4

2 回答 2

1

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

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

（没有<br>）

它也可以是 a<div>而不是 a <p>（或任何块元素，或样式<span>asdisplay:block以强制换行）。

于 2013-10-24T08:30:25.513 回答
0

您可以将自定义过滤器与 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-在 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>
于 2013-10-24T08:28:27.530 回答