AngularJS：ng-clickでのクラスの表示と非表示

Question

私はAngularJSのウェブサイトで作業しています。私は目的に応じて "表示：なし"に設定されたフォームを持っています。

私は、作成と言うボタンがあります。私が望むのは、作成ボタンをクリックすると、 "display：none"に設定されたフォームが "display：block"に変わり、作成ボタンが隠れるはずです。

また、フォームを送信した後、フォームを非表示にして、作成ボタンを再度表示する必要があります。

P.S：これで、ng-showまたはng-hideディレクティブを使用できるように、いくつかの方法があることを理解しました。または、ng-clickディレクティブを使用できます。私は、真剣で専門的なWebアプリケーションを開発する際に、この場合の最高のプログラミング慣行が何であるかを知りたい。

シンプルなことであれば、素晴らしいコードを提供してください。

Answer 1

ng-showとともにng-clickを使用します。

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

これは非表示になり、ボタンをクリックすると表示されます。

Answer 2

単にngShowディレクティブでngClickディレクティブを使用する作業例については、以下を参照してください。

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>

我々はshowFormがtrueの場合は表示するようにフォームを設定しています。

この変数は、button要素のngClickディレクティブを使用して切り替えられ、submitForm関数内のコントローラで明示的にfalseに設定されます。

ngSubmitディレクティブを使用して、submitForm()をonsubmitイベントにバインドします。フォームが送信されると、ロジックが実行され、フォームがリセットされ、非表示になります。

Answer 3

は当初Click To Showボタンを表示し、このボタンをクリックし、次に別のボタンClick To hideボタンをあなたのコンテンツを表示し、表示されるときにも、両方のボタンのためng-showを使用する必要があります。

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