javascript - ブール値に基づいてAngularJSでng-showを切り替えるにはどうすればよいですか?

Question

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

Answer 1

ng-click イベントで「isReplyFormOpen」の値を切り替えるだけです。

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

Answer 2

基本的に、クリックされるたびに値を NOT することで解決しました：isReplyFormOpen

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

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

Answer 3

コントローラー 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 = {};
}

次に、「グローバル」プレフィックスをクリックおよび表示変数に追加します。

<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 ドキュメントの Nested States & Nested Views を確認するか、ビデオを視聴するか、スコープの理解をお読みください。

Answer 4

サブメニューを含む複数のメニューがある場合は、以下のソリューションを使用できます。

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>

最初に呼び出した関数は ng-click = hasSubMenu('dashboard') の 2 つです。この関数はメニューを切り替えるために使用され、以下のコードで説明されています。ng-class="{ active: isActive('/customerCare/transaction')} は、現在のメニュー項目にアクティブなクラスを追加します。

今、アプリでいくつかの関数を定義しました:

まず、変数と関数を宣言するために使用される $rootScope 依存関係を追加します。$rootScope の詳細については、次のリンクを参照してください: 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() 関数を使用できます。要件に応じてコードを変更できます。これが役立つことを願っています。すてきな一日を ：）