第一次加载页面时显示活动颜色 - AngularJS

Question

所以我有两个按钮，它们的作用是在单击其中一个按钮时显示各自的数据。

<div>
  <h1>Ng-show & ng-hide</h1>
  <p class="description">Click on the "show"-link to see the content.</p>
  <button ng-click="showme=true" ng-class="{activeButton: showme == true}">Show</button>
  <button ng-click="showme=false" ng-class="{activeButton: showme == false}">Hide</button> 

  <div class="wrapper">
    <p ng-hide="showme">It will appear here!</p>
    <h2 ng-show="showme">This is mah content, yo!</h2>
  </div>
</div>

现在，我添加了 ng-class 以在单击按钮时显示活动颜色（例如“红色”），而另一个按钮应返回其原始颜色（蓝色）。当页面加载时，我看到的第一件事是消息“它会出现在这里！”。这很好，但代表（“隐藏”）此消息的按钮没有活动的红色。

当页面第一次加载到这个按钮时，如何默认设置活动颜色？我想保持切换功能不变，我应该能够单击一个按钮并看到活动颜色。

您的帮助将不胜感激，在此先感谢！

Answer 1

Null 和 Undefined 类型彼此严格相等(==)，彼此抽象相等(==)。[Ref]

在您的 ng-class 语句中，两个条件都没有得到满足，因此 class 不适用。在ng-show/hide 中，undefined 被评估为false，因此 “它会出现在这里！” 正在显示。

在控制器中将showme的值设置为true

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
  $scope.showme = false;
})

.activeButton {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <h1>Ng-show & ng-hide</h1>
  <p class="description">Click on the "show"-link to see the content.</p>
  <button ng-click="showme=true" ng-class="{activeButton: showme}">Show</button>
  <button ng-click="showme=false" ng-class="{activeButton: !showme}">Hide</button>

  <div class="wrapper">
    <p ng-hide="showme">It will appear here!</p>
    <h2 ng-show="showme">This is mah content, yo!</h2>
  </div>
</div>