javascript - 如何基于 ng 类以 Angular 隐藏某些元素？

Question

我有以下代码:

<tr ng-repeat="version in allVersions" ng-class="{{ version['active'] == 'true' ? 'active' : 'inactive' }}">
 </tr>

我正在根据对象创建 ng-class 并且它工作正常。我得到了预期的输出。

但我在这里想要的是，ng-class 的值为inactive 需要在初始时隐藏。单击说按钮时，需要显示它。基本上就像一个切换按钮，如果再次单击，则仅显示 active 字段。

我试过这个:

<tr ng-repeat="version in allVersions" ng-class="{{ version['active'] == 'true' ? 'active' : 'inactive' }}" ng-show="version['active'] == 'true'">
     </tr>

它只显示 active，但不知道如何继续，如果我想在按钮点击时显示 inactive。

inactive 将始终为 inactive。单击按钮说 showall 它会显示，单击按钮 active 它会隐藏，这里只显示 active 类。

angular 新手，有什么简单的方法吗？

提前致谢。

Answer 1

你可以这样做。在 Controller 中设置此状态属性:

$scope.status = {
    active: true
};

在 HTML 中:

<tr ng-repeat="version in allVersions | filter:status" ng-class="[version.active ? 'active' : 'inactive']">

然后“显示全部”和“事件”按钮可以这样配置:

<button ng-click="status = null">Show all</button>
<button ng-click="status = {active: true}">Active</button>
<button ng-click="status = {active: false}">Inactive</button>

演示:http://plnkr.co/edit/BjiLYjPJG8yPBH1ysf7p?p=preview