javascript - 第一次加载页面时显示事件颜色 - 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 and Undefined Types are strictly equal(==) to themselves and abstractly equal(==) to each other.[Ref]

在您的 ng-class 语句中，两个条件均未满足，因此不应用 class 。在 ng-show/hide 中，undefined 被评估为 false 因此“它将出现在这里!”显示。

在 Controller 中将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>