第一次加载页面时显示活动颜色 - 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-类显示一个积极的颜色（说“红”），当按钮被点击，另一个应该回到它的原始颜色（蓝色）。当页面加载时，我看到的第一件事是“它会出现在这里！”的消息。这很好，但代表（“隐藏”）此消息的按钮不具有活动的红色。

当页面首次加载到此按钮时，我如何设置默认的活动颜色？我想保持切换功能，我应该可以点击一个按钮，看到活动的颜色。

您的帮助将不胜感激，提前致谢！

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>