初めてのページ読み込み時にアクティブな色を表示 - AngularJS

Question

2つのボタンがあり、その役割は、ボタンの1つをクリックするとそれぞれのデータを表示することです。今

<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-クラスを追加しました。ページが読み込まれると、最初に表示されるのは「ここに表示されます！」というメッセージです。これは問題ありませんが、このメッセージを表すボタン（「非表示」）にはアクティブな赤色がありません。

ページが初めてこのボタンに読み込まれるときに、デフォルトでアクティブな色を設定するにはどうすればよいですか？私はまだトグル機能を維持したいと思う、私はボタンをクリックし、アクティブな色を見ることができるはずです。

ご協力いただきありがとうございます。

Answer 1

NullとUndefinedタイプです厳密に等しい（==）自分自身にと（==）お互いに抽象的に等しい。[Ref]あなたのng-class文、のどちらで

条件が成立しているのでclassは適用されません。 ng-show/hideでは、undefinedはfalseと評価されます。したがって、「ここに表示されます！が表示されています。コントローラ

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>