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

Question

I have the following 我有以下

2 different div with class names grey and yellow. 2个不同的div ，类别名称为灰色和黄色。
A button with click event bind on it with angular ng-click. 带有单击事件的按钮使用ng-click角度绑定在其上。

What i am trying 我在想什么

When clicking on the same button i want to show each of this div one at a time. 当单击相同的按钮时，我想一次显示每个div。 for example when i click for the first time i want to show yellow div and on next click i want to hide yellow and show grey and so on. 例如，当我第一次单击时，我要显示黄色div，然后单击下一步，我要隐藏黄色并显示灰色，依此类推。

Here is the code i have written 这是我写的代码

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

Thanks in advance. 提前致谢。

Answer 1

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

               <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

No need of JS here, Only this much of code will work in HTML only 这里不需要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>

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

Answer 3

Just copy and past below code instead of your code 只需复制并通过下面的代码，而不是您的代码

  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 will be either true or false at a time. showMe一次将为true或false。 You need to bind the reverse value to both article element. 您需要将反向值绑定到两个article元素。 so for achieving this, on one article you need to use ng-hide and on another you need to use ng-show. 因此，要实现此目的，在一篇文章中，您需要使用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>

or if you have common content and only want to toggle color you can use ng-class 或者如果您有共同的内容而只想切换颜色，则可以使用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

Try this. 尝试这个。 For article 1 set ng-hide="showMe" and for article 2 set ng-show="showMe" 为文章1设置ng-hide =“ showMe”，为文章2设置ng-show =“ showMe”

Here is a sample code snippet. 这是一个示例代码片段。

 <!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 个解决方案

解决方案1
2 2017-01-31 06:28:14

解决方案2
1 2017-01-31 06:25:03

解决方案3
0 2017-01-31 06:30:33

解决方案4
0 2017-01-31 06:30:37

解决方案5
0 2017-01-31 06:31:37

解决方案6
0 2017-01-31 06:36:02

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

问题描述

6 个解决方案

解决方案1 2 2017-01-31 06:28:14

解决方案2 1 2017-01-31 06:25:03

解决方案3 0 2017-01-31 06:30:33

解决方案4 0 2017-01-31 06:30:37

解决方案5 0 2017-01-31 06:31:37

解决方案6 0 2017-01-31 06:36:02

解决方案1
2 2017-01-31 06:28:14

解决方案2
1 2017-01-31 06:25:03

解决方案3
0 2017-01-31 06:30:33

解决方案4
0 2017-01-31 06:30:37

解决方案5
0 2017-01-31 06:31:37

解决方案6
0 2017-01-31 06:36:02