顯示錶行，如果數據存在

Question

我想有以下3列的表格，代碼看起來像這樣

<table class="table-striped table-bordered table-condensed"> 
    <tbody> 

    <tr ng-if="$index%3==0" ng-repeat="permission in vm.parent.getAllPermissions(category)"> 
    <td ng-repeat="i in [0,1,2]" class="col-xs-2"> 

    <span> 

    <input type="checkbox" checklist-model="vm.data.permissions" checklist-value="vm.parent.getPermission(category,$parent.$index+i)">        {{vm.parent.getPermissionTitle(category,$parent.$index+i) || " "}} 

</span> 
</td> 
</tr> 
</tbody> 
</table> 

這一工程，除了一個小問題大。

有根本沒有足夠的JSON數據，以填補3行，因此2個複選框顯示空

我試過了，正在寫一些東西像

vm.hasPermission = function(category, index) { 
    var permissions = vm.getAllPermissions(category); 
    return permissions && index < permissions.length 
}; 

然後像

<span> 
    <input ng-if="vm.parent.hasPermission(category,$parent.$index+i)"type="checkbox" 
checklist-model="vm.data.permissions" checklist- 
value="vm.parent.getPermission(category,$parent.$index+i)">              {{vm.parent.getPermissionTitle(category,$parent.$index+i) || " "}} 
    </span> 

它修復了問題，但不是在所有的表格上，有些表格仍然會有空的複選框。

我得到這樣

vm.getPermissionTitle = function(category, index) { 
    var permissions = vm.getAllPermissions(category); 
    if (index < permissions.length) { 
    return i18n.get(permissions[index]); 
    } else { 
    return ''; 
    } 
}; 

我試圖消除返回許可標題，並沒有解決它。

Answer 1

的解決方案是

<table class="table-striped table-bordered table-condensed"> 
<tbody> 
    <tr ng-if="$index%3==0" ng-repeat="permission in vm.parent.getAllPermissions(category)"> 
     <td ng-repeat="i in [0,1,2]" class="col-xs-2"> 
      <span ng-if="vm.parent.getPermission(category,$parent.$index+i)"> 
       <input type="checkbox" checklist-model="vm.data.permissions" checklist- value="vm.parent.getPermission(category,$parent.$parent.$index+i)"> 
    {{vm.parent.getPermissionTitle(category,$parent.$parent.$index+i)}} 
</span> 
</td> 
</tr> 
</tbody> 
</table> 

所以基本上{{vm.parent.getPermissionTitle(category,$parent.$parent.$index+i)}}

Answer 2

變化：

<td ng-repeat="i in [0,1,2]" class="col-xs-2"> 
    <span> 
     <input type="checkbox" checklist-model="vm.data.permissions" checklist-value="vm.parent.getPermission(category,$parent.$index+i)">        {{vm.parent.getPermissionTitle(category,$parent.$index+i) || " "}} 
    </span> 
</td> 

爲：

<td ng-repeat="i in [0,1,2]" class="col-xs-2"> 
    <span ng-if="vm.parent.getPermissionTitle(category,$parent.$index+i)!=''"> 
     <input type="checkbox" checklist-model="vm.data.permissions" checklist-value="vm.parent.getPermission(category,$parent.$index+i)">        {{vm.parent.getPermissionTitle(category,$parent.$index+i)}} 
    </span> 
</td> 

如果我深知你的代碼和你的問題，vm.parent.getPermission(category,$parent.$index+i)返回文本（許可）所以只是檢查是不是空...它也可以這樣工作：

<td ng-repeat="i in [0,1,2]" class="col-xs-2"> 
    <span ng-if="vm.parent.getPermissionTitle(category,$parent.$index+i)"> 
     <input type="checkbox" checklist-model="vm.data.permissions" checklist-value="vm.parent.getPermission(category,$parent.$index+i)">        {{vm.parent.getPermissionTitle(category,$parent.$index+i)}} 
    </span> 
</td> 

因爲vm.parent.getPermission(category,$parent.$index+i)返回什麼都不能評估吃了假。

我還沒試試。