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，因此＆＃34;它将显示在此处！＆＃34; 正在显示。

在控制器

中将showme的值设置为true

＆＃13;

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

＆＃13;

.activeButton {
  color: green;
}

＆＃13;

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

＆＃13;

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

1 个答案: