скрыть и показать кнопку на кнопку мыши в angularjs

я создаю веб-приложение, в котором у меня есть четыре кнопкискрыть и показать кнопку на кнопку мыши в angularjs

1) нажмите здесь

2) здесь нажмите

3) (кнопка скрыть) шоу нажмите здесь

4) (кнопка скрыть) показать здесь нажмите

3-й и 4-й кнопки скрыть

, что я хочу is__________________

, когда я нажимаю на кнопку 3 первой кнопки должны быть видны и когда я нажимаю на кнопки 2nd четвёртая кнопка должна быть видна вот мой код

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-ng-show-production</title> 
    <link href="glyphicons.css" rel="stylesheet" type="text/css"> 
    <link href="animations.css" rel="stylesheet" type="text/css"> 


    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 



</head> 
<body ng-app="ngAnimate"> 


<div> 


<button ng-model="clickedh">Click here</button> 
    <button ng-model="clickede">here click</button> 
    </div> 

<div> 
<button ng-hide="true" ng-show="clickedh">show click here</button> 
    <button ng-hide="true" ng-show="clickede">show here click</button> 

</div> 
</body> 
</html>

, но он не работает, что мне нужно это делать?

источник

2016-10-10 Anonymous

Используйте либо нг скрыть или нг-шоу в вашем 3-е и 4-е кнопки. Не печатайте код «true». Insted привязывает значения ng-hide в событии клика 1-й и 2-й кнопок (с помощью ng-click). В этом есть смысл. – ram

ng-hide ожидает выражения, а не значения. Если вы хотите, чтобы ng-hide оценивала значение true с помощью «true», вам нужно также обернуть true в одинарных кавычках.

попытка нг скрыть = «" истинный»

Правильный способ сделать это, однако, поставить переменную в области видимости.

Таким образом, вы должны действительно сделать что-то вроде этого (возможно, в вашем контроллере):

$scope.show_me = true;

Затем в шаблоне вы можете сделать что-то вроде этого:

<div ng-show = "show_me">HI</div> 
<div ng-hide = "!show_me">HI, I'm showing too! (because of the ! operator)</div>

Затем в кнопку, вы можете что-то вроде этого:

<button ng-click = "show_me = !show_me">Toggle the Thing</button>

источник

2016-10-10 09:18:44 Porlune

Измените свои кнопки на это

<button ng-init="clickedh=false" ng-model="clickedh" ng-click="clickedh=true">Click here</button> 
    <button ng-model="clickede" ng-init="clickede=false" ng-click="clickede=true">here click</button> 


<button ng-show="clickedh">show click here</button> 
    <button ng-show="clickede">show here click</button>

Не используйте ng-hide и ng-show одновременно

Вы также можете установить true и false значение из контроллера, если вы хотите, чтобы избежать использования ng-init

FIDDLE

источник

2016-10-10 09:21:06 Nishant123

Попробуйте: Сначала инициализируйте ваш app module в сценариях. Затем вы должны объявить контроллер, что вам понадобится другая операция. И я использовал ng-init, чтобы установить значение по умолчанию (bool) каждой переменной, которое необходимо будет определить show true/false. Вы можете сделать это с помощью контроллера.

var app = angular.module('ngAnimate', []); //init your app module 
 
app.controller('myCtrl', function($scope) { // a controller 
 
    
 
});

<!doctype html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Example - example-ng-show-production</title> 
 
     <link href="glyphicons.css" rel="stylesheet" type="text/css"> 
 
     <link href="animations.css" rel="stylesheet" type="text/css"> 
 

 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
    </head> 
 
    <body ng-app="ngAnimate" ng-controller="myCtrl"> 
 
     <div> 
 
      <button ng-init="clickedh=false" ng-click="clickedh=!clickedh">Click here</button> 
 
      <button ng-init="clickede=false" ng-click="clickede=!clickede">here click</button> 
 
     </div> 
 
     <div> 
 
      <button ng-show="clickedh">show click here</button> 
 
      <button ng-show="clickede">show here click</button> 
 
     </div> 
 
     
 
    </body> 
 
</html>

источник

2016-10-10 09:28:35 AHJeebon

Для опции мыши (нажмите здесь & здесь клик) из тех кнопки, мы должны обеспечить нг щелкните функцию на те кнопки HTML.

Затем, чтобы показать третью или четвертую кнопку при нажатии 1-го или 2-го соответственно, мы должны позвонить ng-show для 3-й и 4-й кнопок.

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-ng-show-production</title> 
 
    <link href="glyphicons.css" rel="stylesheet" type="text/css"> 
 
    <link href="animations.css" rel="stylesheet" type="text/css"> 
 

 

 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
 

 

 

 
</head> 
 
<body ng-app="ngAnimate"> 
 
<p>This code is working fine :)</p> 
 

 
<div> 
 
<button ng-model="clickedh" ng-click="clickedh=true">Click here</button> 
 
    <button ng-model="clickede" ng-click="clickede=true">here click</button> 
 
    </div> 
 

 
<div> 
 
<button ng-show="clickedh">show click here</button> 
 
    <button ng-show="clickede">show here click</button> 
 

 
</div> 
 
</body> 
 
</html>

источник

2017-05-29 09:25:58

Привет, Если возможно, попробуйте добавить описание к вашему подходу к ответам. Благодарю. –

Попробуйте этот метод:

<div ng-init="showButton=true"/> 
<div ng-show="showText">Text</div> 
<button ng-Click="showText=true;showButton=!showButton" ng-show="showButton">Show</button> 
<button ng-Click="showText=false;showButton=!showButton" ng-show="!showButton">Hide</button>

Надежда, что помогает;)

источник

2017-07-20 22:42:11 Psf

скрыть и показать кнопку на кнопку мыши в angularjs

ответ

Смежные вопросы