在页面第一次加载时显示活动的颜色

show active color when page loads for the first time - AngularJS

本文关键字：显示 活动 颜色 加载 第一次      更新时间：2023-09-26

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

<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类来显示一个活动的颜色(比如'红色')，当一个按钮被点击时，另一个应该回到它原来的颜色(蓝色)。当页面加载时，我首先看到的是消息"它将出现在这里!"这很好，但表示("隐藏")此消息的按钮没有活动颜色红色。

当页面第一次加载到这个按钮时，我如何设置默认的活动颜色?我想保持切换功能仍然，我应该能够点击一个按钮，看到活动的颜色。

你的帮助将是感激的，提前感谢!

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

在您的ng-class语句中，两个条件都不满足，因此不应用class。在ng-show/hide中，undefined被求值为false，因此"It will appear here!"正在显示

设置控制器

中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>

相关文章：