AngularJS在表格沒有行時隱藏表格

當表格沒有行時，如何有條件地隱藏HTML表格？因爲我使用過濾器，所以我不知道結果集是否爲空。AngularJS在表格沒有行時隱藏表格

我遍歷錶行，但外表（包括thead）將得到呈現，即使沒有行。我該如何反思結果數組的長度並將這些信息用於ng-show/ng-hide？

2014-01-05 JohnDoe

顯示您的代碼，請。 – hgoebl

[如何根據AngularJS中的過濾結果更改類的可能的副本]（http://stackoverflow.com/questions/20687586/how-to-change-class-depending-on-filter-result-in-angularjs） – Stewie

有一些可能的解決方案，但最好的解決方案取決於您的要求和限制。如果它不是一個巨大的應用程序，你不希望在你的未經過濾的數組的項目太多，最好的解決辦法是可能簡單地用一個ng-show具有相同的過濾器：

<table ng-show="(items | filter:criteria).length"> 
    <tr ng-repeat="item in items | filter:criteria">...</tr> 
</table>

但是要記住您的過濾器將在每個摘要循環中遍歷數組的所有項目兩次。如果性能可能是一個問題，那麼你可能希望你的控制器來消化這個值你，只是把它綁定到你的範圍：

controller('YourCtrl', function($scope, $filter) { 
    // $watchCollection available in version 1.1+ 
    $scope.$watchCollection('items', function(newVal) { 
    $scope.filteredItems = $filter('filter')(newVal, $scope.criteria); 
    }); 
});

，並在你的HTML：

<table ng-show="filteredItems.length"> 
    <tr ng-repeat="item in filteredItems">...</tr> 
</table>

來源

2014-01-05 23:28:53

這是一個很好的答案，特別是關於在控制器中進行過濾的建議。 – threeve

我把我的控制器在這裏http://jsfiddle.net/jaL6b/1/，幷包括你的解決方案。但是watchcollection沒有被調用。使用角1.2.6 – JohnDoe

好吧，再試一次。見http://jsfiddle.net/jaL6b/2/：我現在註冊過濾器功能，它被調用。我注意到的唯一奇怪的事情是，過濾器函數get會調用集合中的每個項目，而不是整個集合。我認爲這個過濾器函數應該返回已過濾的數組。 – JohnDoe

AngularJS在表格沒有行時隱藏表格

回答

相關問題