Angularjs -> ng-clic e ng-spettacolo per mostrare un div

Sto provando solo per visualizzare un div quando l'utente preme un tasto, sembra essere facile, ma dopo aver speso un sacco di tempo sto diventando veramente pazzo con questo . Il mio codice èAngularjs -> ng-clic e ng-spettacolo per mostrare un div

mio violino: http://jsfiddle.net/jmhostalet/4WK7R/1/

<div ng-app> 
    <div ng-controller="MyCtrl"> 
     <div><button id="mybutton" ng-click="showAlert()">Click me</button></div> 
     <div>Value: {{myvalue}}</div> 
     <div><div ng-show="myvalue" class="hideByDefault">Here I am</div></div> 
    </div> 
</div>

e il mio controller

function MyCtrl($scope) { 

    $scope.myvalue = false; 

    $scope.showAlert = function(){ 
    $scope.myvalue = true; 
    }; 
}

Grazie!

fonte

2014-04-12 jmhostalet

Basta sbarazzarsi dei display: none; dal CSS. AngularJS ha il controllo di mostrare/nascondere quel div.

Se si desidera nascondere per impostazione predefinita, è sufficiente impostare il valore di scope.myvalue su false inizialmente - che si sta già facendo.

fonte

2014-04-12 20:23:02

Basta togliere css dal js violino, ng-show hanno controll esso. AngularJS imposta lo stile di visualizzazione su none (utilizzando un flag! Importante). E rimuovi questa classe quando deve essere mostrata.

fonte

2014-04-12 20:23:14

classe rimuovere hideByDefault. Div rimarrà nascosto fino a che il valore di myvalue non sia falso.

fonte

2014-04-12 20:23:36 Nish

È possibile utilizzare il tag ng-class. Dai uno sguardo al numero http://jsfiddle.net/4WK7R/3/

fonte

2014-04-12 20:23:55 Akxe

Se vuoi assicurarti che il tuo div non sia visibile di default usa invece la classe ng-cloak. Si lavorerà correttamente con ngShow direttiva:

<div><div ng-show="myvalue" class="ng-cloak">Here I am</div></div>

Demo: http://jsfiddle.net/4WK7R/4/

fonte

2014-04-12 20:25:52 dfsq

Basta togliere css dal js violino, utilizzare il myvaue === vero.

<div ng-show="myvalue == true" class="ng-cloak">Here I am</div>

fonte

2014-12-04 12:27:44

questo risolverà il problema. Non è necessario scrivere codice nel controller. E rimuovere gli stili CSS display:none

<div><button id="mybutton" ng-click="myvalue=true">Click me</button></div>

fonte

2015-08-08 07:26:07

Penso che si può creare un'espressione per mostrare o nascondere

<div ng-app> 
    <div ng-controller="MyCtrl"> 
     <div><button id="mybutton" ng-click="myvalue = myvalue == true ? false : true;">Click me</button></div> 
     <div>Value: {{myvalue}}</div> 
     <div><div ng-show="myvalue" class="hideByDefault">Here I am</div></div> 
    </div> 
</div>

fonte

2015-12-17 00:02:05

<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> 
    <script type="text/javascript"> 
     var app = angular.module('MyApp', []) 
     app.controller('MyController', function ($scope) { 
      //This will hide the DIV by default. 
      $scope.IsVisible = false; 
      $scope.ShowHide = function() { 
       //If DIV is visible it will be hidden and vice versa. 
       $scope.IsVisible = $scope.IsVisible ? false : true; 
      } 
     }); 
    </script> 
    <div ng-app="MyApp" ng-controller="MyController"> 
     <input type="button" value="Show Hide DIV" ng-click="ShowHide()" /> 
     <br /> 
     <br /> 
     <div ng-show = "IsVisible">My DIV</div> 
    </div> 
</body> 
</html>

ESEMPIO: - http://jsfiddle.net/mafais/4WK7R/380/

fonte

2016-05-14 05:04:47 MAFAIZ

molto semplice, basta fare questo:

<button ng-click="hideShow=(hideShow ? false : true)">Toggle</button> 

<div ng-if="hideShow">hide and show content ...</div>

fonte

2017-04-05 13:26:07

ho implementato qualcosa in questo modo la funzione

Controller:

app.controller("aboutController", function(){ 
this.selected = true; 
this.toggle = function(){ 
    this.selected = this.selected?false:true; 
} 
});

HTML:

<div ng-controller="aboutController as about"> 
<div ng-click="about.toggle()">Click Me to toggle the Fruits Name</div> 
<div ng-show ="about.selected">Apple is a delicious fruit</div> 
</div>

fonte

2017-08-13 21:21:59

Angularjs -> ng-clic e ng-spettacolo per mostrare un div

risposta

Problemi correlati