AngularJS過濾器null鍵：ngRepeat列表中的值行 - 存儲在數組中的對象中的數據

Question

我有我的數據存儲在一個對象數組中，它正用於在ngRepeat頁面上創建一個列表。問題是對象中的一些值是空的，我想隱藏他們的行，但不是整個對象。我嘗試在個人<li>上使用ngHide，但它並沒有摺疊該行，因爲它只是隱藏它，我不想通過函數或額外的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不垮行是遵循每個<span>元素<br>。這是可行的，如果你寫來代替：

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

（沒有<br>）

它也可以是一個<div>而不是<p>（或任何塊元素，或風格<span>爲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-重複在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>