web-dev-qa-db-ja.com

ブール値に基づいてAngularJSのng-showを切り替える方法

isReplyFormOpenがtrueの場合にのみ表示したいメッセージに返信するためのフォームがあり、返信ボタンをクリックするたびにフォームが表示されるかどうかを切り替えます。これどうやってするの？

javascripthtmlangularjsng-show
108
liamzebedee

Ng-clickイベントで "isReplyFormOpen"の値を切り替える必要があるだけです。

<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>
 <div ng-show="isReplyFormOpen" id="replyForm">
   </div>
212
Nitu Bansal

基本的に私はそれがクリックされたときはいつでもisReplyFormOpen値にNOT - でそれを解決しました：

<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>

<div ng-init="isReplyFormOpen = false" ng-show="isReplyFormOpen" id="replyForm">
    <!-- Form -->
</div>
29
liamzebedee

ここをクリックした場合は、

ng-click="orderReverse = orderReverse ? false : true"
17
Andrii Motsyk

コントローラAにボタンがあり、コントローラBに表示したい要素がある場合は、ドット表記を使用してコントローラ間でスコープ変数にアクセスする必要があるかもしれません。

例えば、これはうまくいきません。

<div ng-controller="ControllerA">
  <a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>

  <div ng-controller="ControllerB">
    <div ng-show="isReplyFormOpen" id="replyForm">
    </div>
  </div>

</div>

これを解決するには、グローバル変数を作成します（つまり、コントローラーAまたはメインのコントローラー）。

.controller('ControllerA', function ($scope) {
  $scope.global = {};
}

それからclickとshow変数に 'global'プレフィックスを追加します。

<div ng-controller="ControllerA">
  <a ng-click="global.isReplyFormOpen = !global.isReplyFormOpen">Reply</a>

  <div ng-controller="ControllerB">
    <div ng-show="global.isReplyFormOpen" id="replyForm">
    </div>
  </div>

</div>

詳細については、 Angular-UIドキュメントの入れ子の状態と入れ子のビュー 、 ビデオを見る 、または スコープを理解する をご覧ください。

5
James Gentes

あなたがサブメニューを持つ複数のメニューを持っているなら、あなたは以下の解決策で行くことができます。

HTML

          <ul class="sidebar-menu" id="nav-accordion">
             <li class="sub-menu">
                  <a href="" ng-click="hasSubMenu('dashboard')">
                      <i class="fa fa-book"></i>
                      <span>Dashboard</span>
                      <i class="fa fa-angle-right pull-right"></i>
                  </a>
                  <ul class="sub" ng-show="showDash">
                      <li><a ng-class="{ active: isActive('/dashboard/loan')}" href="#/dashboard/loan">Loan</a></li>
                      <li><a ng-class="{ active: isActive('/dashboard/recovery')}" href="#/dashboard/recovery">Recovery</a></li>
                  </ul>
              </li>
              <li class="sub-menu">
                  <a href="" ng-click="hasSubMenu('customerCare')">
                      <i class="fa fa-book"></i>
                      <span>Customer Care</span>
                      <i class="fa fa-angle-right pull-right"></i>
                  </a>
                  <ul class="sub" ng-show="showCC">
                      <li><a ng-class="{ active: isActive('/customerCare/eligibility')}" href="#/CC/eligibility">Eligibility</a></li>
                      <li><a ng-class="{ active: isActive('/customerCare/transaction')}" href="#/CC/transaction">Transaction</a></li>
                  </ul>
              </li>
          </ul>

私が最初に呼んだ2つの関数がありますng-click = hasSubMenu（ 'dashboard'）です。この機能はメニューを切り替えるために使用され、それは以下のコードで説明されます。 ng-class = "{active：isActive（ '/ customerCare/transaction'）}これは現在のメニューアイテムにアクティブなクラスを追加します。

今、私は私のアプリでいくつかの機能を定義しました：

まず、変数と関数を宣言するために使用される依存関係$ rootScopeを追加します。 $ roootScopeの詳細については、次のリンクを参照してください。 https://docs.angularjs.org/api/ng/service/ $ rootScope

これが私のアプリファイルです。

 $rootScope.isActive = function (viewLocation) { 
                return viewLocation === $location.path();
        };

上記の関数は現在のメニュー項目にアクティブなクラスを追加するために使用されます。

        $rootScope.showDash = false;
        $rootScope.showCC = false;

        var location = $location.url().split('/');

        if(location[1] == 'customerCare'){
            $rootScope.showCC = true;
        }
        else if(location[1]=='dashboard'){
            $rootScope.showDash = true;
        }

        $rootScope.hasSubMenu = function(menuType){
            if(menuType=='dashboard'){
                $rootScope.showCC = false;
                $rootScope.showDash = $rootScope.showDash === false ? true: false;
            }
            else if(menuType=='customerCare'){
                $rootScope.showDash = false;
                $rootScope.showCC = $rootScope.showCC === false ? true: false;
            }
        }

デフォルトでは、$ rootScope.showDashと$ rootScope.showCCはfalseに設定されています。ページが最初にロードされたときにメニューをクローズに設定します。 2つ以上のサブメニューがある場合はそれに応じて追加してください。

hasSubMenu（）関数はメニュー間の切り替えに機能します。小さな条件を追加しました

if(location[1] == 'customerCare'){
                $rootScope.showCC = true;
            }
            else if(location[1]=='dashboard'){
                $rootScope.showDash = true;
            }

選択したメニュー項目に従ってページを再ロードした後も、サブメニューは開いたままになります。

私は自分のページを次のように定義しました。

$routeProvider
        .when('/dasboard/loan', {
            controller: 'LoanController',
            templateUrl: './views/loan/view.html',
            controllerAs: 'vm'
        })

サブメニューのない単一のメニューがある場合に限り、isActive（）関数を使用できます。必要に応じてコードを修正できます。これが役立つことを願っています。すてきな一日を ：）

0
Vaibhav Ujjwal

これがngclick＆ng-ifディレクティブの使用例です。

注：ng-ifはDOMから要素を削除しますが、ng-hideは要素の表示を隠すだけです。

<!-- <input type="checkbox" ng-model="hideShow" ng-init="hideShow = false"></input> -->

<input type = "button" value = "Add Book"ng-click="hideShow=(hideShow ? false : true)"> </input>
     <div ng-app = "mainApp" ng-controller = "bookController" ng-if="hideShow">
             Enter book name: <input type = "text" ng-model = "book.name"><br>
             Enter book category: <input type = "text" ng-model = "book.category"><br>
             Enter book price: <input type = "text" ng-model = "book.price"><br>
             Enter book author: <input type = "text" ng-model = "book.author"><br>


             You are entering book: {{book.bookDetails()}}
     </div>

    <script>
             var mainApp = angular.module("mainApp", []);

             mainApp.controller('bookController', function($scope) {
                $scope.book = {
                   name: "",
                   category: "",
                   price:"",
                   author: "",


                   bookDetails: function() {
                      var bookObject;
                      bookObject = $scope.book;
                      return "Book name: " + bookObject.name +  '\n' + "Book category: " + bookObject.category + "  \n" + "Book price: " + bookObject.price + "  \n" + "Book Author: " + bookObject.author;
                   }

                };
             });
    </script>
0
Abdallah Okasha