Question

我有以下

2个不同的 div ，类名为灰色和黄色。
带有点击事件的按钮以角度ng单击进行绑定。

我在尝试什么

当点击同一个按钮时，我想一次显示一个div。例如，当我第一次点击时，我想显示黄色div，然后在下一次点击我想隐藏黄色并显示灰色等等。

这是我写的代码

    <!DOCTYPE html>
    <html lang="en-US">
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
       <body  data-ng-app="myApp">
          <div data-ng-controller="myController">
             <article class="grey" ng-show="showMe">Grey</article>
             <article class="yellow" ng-show="showMe">Yellow</article>
             <button data-ng-click="toggleMe()">Click</button>
          </div>
          <script>
             var myApp = angular.module('myApp',[]);
             myApp.controller('myController',function($scope){
             $scope.showMe = false;
             $scope.toggleMe = function(){
             $scope.showMe = true;
             }
             });
          </script>
          <style>
             .grey{width:100%;max-width:300px;height:100px;background:grey;}
             .yellow{width:100%;max-width:300px;height:100px;background:yellow;}
          </style>
       </body>
    </html>

提前致谢。

Answer 1

https://plnkr.co/edit/ORJYrkpNPVR4h8DPOuVh?p=preview

               <div data-ng-controller="myController">
                     <article class="grey" ng-show="showMe">Grey</article>
                     <article class="yellow" ng-show="!showMe">Yellow</article>
                     <button data-ng-click="showMe = !showMe">Click</button>
                  </div>
                  <style>
                     .grey{width:100%;max-width:300px;height:100px;background:grey;}
                     .yellow{width:100%;max-width:300px;height:100px;background:yellow;}
                  </style>

Answer 2

这里不需要JS，只有这么多代码才能在HTML中使用

<div ng-app="" ng-init="showYellowAndHideGrey = true">
         <article class="grey" ng-show="showYellowAndHideGrey == false">Grey</article>
         <article class="yellow" ng-show="showYellowAndHideGrey == true">Yellow</article>
         <button ng-click="showYellowAndHideGrey = !showYellowAndHideGrey">Click</button>
</div>

工作示例https://jsfiddle.net/1ms451sm/

Answer 3

只需复制并通过以下代码而不是代码

  var myApp = angular.module('myApp',[]);
                 myApp.controller('myController',function($scope){
                 $scope.showMe = true;
                 $scope.toggleMe = function(){
                 $scope.showMe = !$scope.showMe ;
                 }
                 });

 .grey{width:100%;max-width:300px;height:100px;background:grey;}
                 .yellow{width:100%;max-width:300px;height:100px;background:yellow;}

<!DOCTYPE html>
        <html lang="en-US">
           <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
           <body  data-ng-app="myApp">
              <div data-ng-controller="myController">
                 <article class="grey" ng-show="showMe">Grey</article>
                 <article class="yellow" ng-hide="showMe">Yellow</article>
                 <button data-ng-click="toggleMe()">Click</button>
              </div>              
           </body>
        </html>

Answer 4

showMe一次都是真或假。您需要将反向值绑定到两个article元素。所以为了达到这个目的，在一篇文章中你需要使用ng-hide而在另一篇文章中你需要使用ng-show。

 <!DOCTYPE html>
    <html lang="en-US">
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
       <body  data-ng-app="myApp">
          <div data-ng-controller="myController">
             <article class="grey" ng-hide="showMe">Grey</article>
             <article class="yellow" ng-show="showMe">Yellow</article>
             <button data-ng-click="toggleMe()">Click</button>
          </div>
          <script>
             var myApp = angular.module('myApp',[]);
             myApp.controller('myController',function($scope){
             $scope.showMe = false;
             $scope.toggleMe = function(){
             $scope.showMe = true;
             }
             });
          </script>
          <style>
             .grey{width:100%;max-width:300px;height:100px;background:grey;}
             .yellow{width:100%;max-width:300px;height:100px;background:yellow;}
          </style>
       </body>
    </html>

Answer 5

<div ng-app="" ng-init="showYellowAndHideGrey = true">
         <article class="grey" ng-if="showYellowAndHideGrey">Grey</article>
         <article class="yellow" ng-if="showYellowAndHideGrey">Yellow</article>
         <button ng-click="showYellowAndHideGrey = !showYellowAndHideGrey">Click</button>
</div>

或者如果您有共同内容并且只想切换颜色，则可以使用ng-class

<div ng-app="" ng-init="showYellowAndHideGrey = true">
             <article ng-class="showYellowAndHideGrey? 'grey' : 'yellow'" ng-if="showYellowAndHideGrey">Grey/Yellow</article>
             <button ng-click="showYellowAndHideGrey = !showYellowAndHideGrey">Click</button>
</div>

Answer 6

试试这个。对于第1条，设置ng-hide =“showMe” 对于第2条，设置ng-show =“showMe”

以下是示例代码段。

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body data-ng-app="myApp">
    <div data-ng-controller="myController">
        <article class="grey" ng-hide="showMe">Grey</article>
        <article class="yellow" ng-show="showMe">Yellow</article>
        <button data-ng-click="toggleMe()">Click</button>
    </div>
    <script>
        var myApp = angular.module('myApp', []);
        myApp.controller('myController', function ($scope) {
            $scope.showMe = false;
            $scope.toggleMe = function () {
                $scope.showMe = !$scope.showMe;
            }
        });
    </script>
    <style>
        .grey {
            width: 100%;
            max-width: 300px;
            height: 100px;
            background: grey;
        }
        
        .yellow {
            width: 100%;
            max-width: 300px;
            height: 100px;
            background: yellow;
        }
    </style>
</body>

</html>

单击同一个按钮显示不同的div - Angular JS

6 个答案: