根據AngularJS中的動態內容顯示/隱藏表格行？

我有一個HTML表如下：根據AngularJS中的動態內容顯示/隱藏表格行？

<table> 
    <tr ng-show="showCats"><td>Cat</td><td>1</td></tr> 
    <tr ng-show="showDogs"><td>Dog</td><td>2</td></tr> 
    <tr ng-show="showCats"><td>Cat</td><td>4</td></tr> 
    <tr ng-show="showDogs"><td>Dog</td><td>3</td></tr> 
    <tr ng-show="showCats"><td>Cat</td><td>5</td></tr> 
    <tr ng-show="showLizards"><td>Lizard</td><td>1</td></tr> 
    <tr ng-show="showLizards"><td>Lizard</td><td>3</td></tr> 
    <tr ng-show="showMice"><td>Mouse</td><td>5</td></tr> 
    <tr ng-show="showMice"><td>Mouse</td><td>1</td></tr> 
    <tr ng-show="showDogs"><td>Dog</td><td>3</td></tr> 
</table>

和鏈接如下：

<a href="#" ng-click="showRows('all')">Show all</a> 
<a href="#" ng-click="showRows('cats')">Cats</a> 
<a href="#" ng-click="showRows('dogs')">Dogs</a> 
<a href="#" ng-click="showRows('lizards')">Lizards</a> 
<a href="#" ng-click="showRows('mice')">Mice</a>

什麼是在角的正確方法隱藏/顯示每行被點擊的動物類型時？我知道filter，但我的印象是這隻適用於使用ng-repeat在Angular中生成的表格。（此表正在生成服務器端。）

我有一個工作解決方案，根據點擊的內容手動將每個showAnimal變量設置爲true/false，但這看起來像是一種低效，不可縮放的方法。謝謝！

來源

2013-08-03 jetcom

這是不是可以更容易，如果你只生成對應於你的JSON服務器端的表？這樣你可以很容易地使用ng-repeat和過濾器，並且它可以擴展，並且效率很高。 – DotDotDot

我已經寫了一篇關於[在AngularJS中隱藏和顯示元素]的詳細博客文章（http：//www.andrewboni的.com/2013/08/25 /展示和隱藏元素與 - angularjs /）。希望它可以幫助某人。 – jetcom

鑑於你的限制，你可以做這樣的事情：plunker demo

控制器

$scope.selected = 'all'; 
$scope.isShown = function(animal) { 
    if ($scope.selected == 'all') { 
    return true; 
    } 
    return $scope.selected == animal; 
}

HTML

<select ng-model="selected"> 
    <option value="all">All</option> 
    <option value="cat">Cat</option> 
    <option value="dog">Dog</option> 
    <option value="lizard">Lizard</option> 
    <option value="mice">Mice</option> 
</select> 

<table> 
    <tr ng-show="isShown('cat')"><td>Cat</td><td>1</td></tr> 
    <tr ng-show="isShown('dog')"><td>Dog</td><td>2</td></tr> 
    <tr ng-show="isShown('cat')"><td>Cat</td><td>4</td></tr> 
    <tr ng-show="isShown('dog')"><td>Dog</td><td>3</td></tr> 
    <tr ng-show="isShown('cat')"><td>Cat</td><td>5</td></tr> 
    <tr ng-show="isShown('lizard')"><td>Lizard</td><td>1</td></tr> 
    <tr ng-show="isShown('lizard')"><td>Lizard</td><td>3</td></tr> 
    <tr ng-show="isShown('mice')"><td>Mouse</td><td>5</td></tr> 
    <tr ng-show="isShown('mice')"><td>Mouse</td><td>1</td></tr> 
    <tr ng-show="isShown('dog')"><td>Dog</td><td>3</td></tr> 
</table>

來源

2013-08-03 20:42:50

根據AngularJS中的動態內容顯示/隱藏表格行？

回答

相關問題