Angular에서 ng-show를 전환하려면 어떻게 해야 합니까?부울에 기반한 JS?

Angular에서 ng-show를 전환하려면 어떻게 해야 합니까?부울에 기반한 JS?

가 보여주고 , '다'가 있을 만 있어요.isReplyFormOpen①진짜다【응답】튼을 클릭할 때마다 폼 표시 여부를 전환합니다.★★★★★★★★★★★★★★★★★★★?

ng-click 이벤트에서 "isReplyFormOpen" 값을 전환하기만 하면 됩니다.

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

기본적으로는 NOT-in으로 해결했습니다.isReplyFormOpen값을 클릭합니다.

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

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

여기를 클릭하면 다음과 같습니다.

ng-click="orderReverse = orderReverse ? false : true"

컨트롤러 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 = {};
}

그런 다음 클릭에 '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 」를 참조해 주세요.비디오를 시청하거나 이해 범위를 읽어 주세요.

다음은 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>

하위 메뉴를 사용하는 메뉴가 여러 개 있는 경우, 다음 솔루션을 사용할 수 있습니다.

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('대시보드')입니다.이 기능은 메뉴를 전환하는 데 사용되며 아래 코드에 설명되어 있습니다.ng-class="{active: isActive('/customerCare/transaction')}"는 현재 메뉴 항목에 활성 클래스를 추가합니다.

이제 앱에서 몇 가지 기능을 정의했습니다.

먼저 변수와 함수를 선언하는 데 사용되는 종속성 $rootScope를 추가합니다.$rooot에 대해 자세히 알아보려면스코프는 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로 설정되어 있습니다.페이지가 처음 로드될 때 메뉴가 닫힘으로 설정됩니다.서브메뉴가 3개 이상 있는 경우 적절히 추가합니다.

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() 함수를 사용할 수 있습니다.필요에 따라 코드를 수정할 수 있습니다.이게 도움이 되길 바라.좋은 하루 되세요 :)

언급URL : https://stackoverflow.com/questions/19018536/how-do-i-toggle-an-ng-show-in-angularjs-based-on-a-boolean