使用 true / false 应用 ng 类

applying ng-class using true / false

本文关键字：ng 应用 false true 使用      更新时间：2023-09-26

我有以下两个按钮，可以在我的页面上ng-hide和ng-show元素。 

<a ng-click="showimage=true" ng-class="{ 'activated': showimage}" class="button">Images</a>
<a ng-click="showimage=false" ng-class="{ 'activated': !showimage}" class="button">Details</a>

为了使第一个按钮处于活动状态，我使用：

$scope.showimage = true;

这一切都运作良好。

我的问题是，当我使用这些按钮时，activated类不会应用于活动按钮。我希望这些像切换一样工作，如果另一个按钮不是，则一个按钮始终处于活动状态。

代码笔

您的代码似乎按原样工作。 我创建了一个极简主义的 plnkr 进行测试。 也许由于其他副作用，您没有看到某些东西？

http://embed.plnkr.co/jnqekT3fTi77c0jg5EUx/preview

.html

<head>
<!--....-->
  <style>
    .activated {
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div ng-controller="Ctrl">
    <a ng-click="showimage = true" ng-class="{ 'activated': showimage}" class="button">Images</a>
    <a ng-click="showimage = false" ng-class="{ 'activated': !showimage}" class="button">Details</a>
  </div>
</body>

.js：

function Ctrl($scope) {
}
相关文章：