如何基于ng-class隐藏角度中的某些元素？

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课程。

角度新手，有什么容易做到的吗？

提前致谢。

Answer 1

你可以这样做。在控制器中设置此状态属性：

$scope.status = {
    active: true
};

在HTML中：

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

然后＆＃34;全部显示＆＃34;和＆＃34;活跃＆＃34;按钮可以这样配置：

<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

Answer 2

替换

ng-show="version['active'] == 'true'"

带

ng-show="show(version['active'])"

并将其添加到您的控制器。这假设你的showall（）函数为“show all”将模型变量$scope.showAll设置为true，否则设置为false。

$scope.show = function(active) {
    return $scope.showAll || active;
}