AngularJS: Klasse bei ng-click ein- und ausblenden

Question

Ich arbeite an einer Website in AngularJS. Ich habe ein Formular, das absichtlich auf "display: none" eingestellt ist.

Ich habe eine Schaltfläche, die create sagt. Was ich will ist, dass, wenn ich auf den create-Button klicke, das Formular "display: none" in "display: block" geändert wird und der create-Button sich verstecken sollte.

Auch nach dem Absenden des Formulars sollte das Formular ausblenden und die Schaltfläche erstellen sollte wieder sichtbar sein.

P.S: Jetzt verstehe ich, dass es mehrere Möglichkeiten gibt, dies zu tun, wie ich die ng-show oder ng-hide Direktive verwenden könnte. ODER ich könnte ng-click Direktive verwenden. Ich möchte wissen, was in diesem Fall die beste Programmierpraxis ist, wenn man eine seriöse und professionelle Webanwendung entwickelt.

Es ist eine einfache Sache also, wenn Sie bitte den Code bereitstellen könnte, wäre toll.

Answer 1

Ich würde ng-klicken zusammen mit ng-Show.

<div class="hideShow" ng-show="showToggle"> 
    <form ng-submit="showToggle = false"></form> 

</div> 
<button ng-hide="showToggle" ng-click="showToggle = !showToggle">Click To Show</button> 

Das wird versteckt gestartet, und zeigen Sie, wenn Sie auf die Schaltfläche klicken.

Answer 2

Nutzen Sie einfach die ngClick Richtlinie mit der ngShow Richtlinie siehe unten für ein Arbeitsbeispiel:

var myApp = angular.module('myApp', []); 
 

 
myApp.controller('FormController', ['$scope', 
 
    function($scope) { 
 

 
    // init showForm to false; 
 
    $scope.showForm = false; 
 

 
    // init empty user object for our form 
 
    $scope.user = {}; 
 

 
    $scope.submitForm = function() { 
 
     // logic when the form is submitted 
 
     //... 
 

 
     // reset the user 
 
     $scope.user = {}; 
 

 
     // finally hide the form 
 
     $scope.showForm = false; 
 
    }; 
 

 
    } 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp"> 
 

 
    <div ng-controller="FormController"> 
 

 
    <button ng-hide="showForm" ng-click="showForm = true">Show form</button> 
 

 
    <form ng-show="showForm" ng-submit="submitForm()"> 
 

 
     <input type="text" name="firstname" ng-model="user.firstname" /> 
 

 
     <input type="submit" value="submit" /> 
 

 
    </form> 
 

 
    </div> 
 

 
</div>

Wir setzen das Formular zu zeigen, wenn showForm wahr ist.

Diese Variable wird mit der ngClick Direktive für das Element button umgeschaltet und im Controller innerhalb der submitForm-Funktion ebenfalls explizit auf false gesetzt.

Wir verwenden die ngSubmit Direktive, um submitForm() an das Ereignis onsubmit zu binden. Wenn das Formular gesendet wird, führen Sie Ihre Logik aus, und dann wird das Formular zurückgesetzt und ausgeblendet.

Answer 3

Zunächst zeigen Click To Show Schaltfläche und wenn Sie auf diese Schaltfläche klicken, dann zeigt Ihren Inhalt und zeigen Sie eine andere Schaltfläche Click To hide Schaltfläche, so müssen auch ng-show für beide Tasten verwenden.

<div class="hideShow" ng-show="isShow"> 
    <p>here your form or other content <p> 
</div> 
<button ng-click="isShow= !isShow" ng-show="!isShow">Click To Show</button> 
<button ng-click="isShow= !isShow" ng-show="isShow">Click To hide</button>