如何基于布尔值在AngularJS中切换ng-show?

时间:2013-09-26 02:52:56

标签: javascript html angularjs ng-show

我有一个表单,用于回复我希望仅在isReplyFormOpen为真时显示的消息,并且每次单击回复按钮时我都要切换是否显示表单。我怎么能这样做?

6 个答案:

答案 0 :(得分:212)

您只需要在ng-click事件上切换“isReplyFormOpen”的值

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

答案 1 :(得分:29)

基本上,只要点击{em> NOT - isReplyFormOpen值,我就解决了这个问题:

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

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

答案 2 :(得分:17)

如果点击此处,则为:

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

答案 3 :(得分:5)

值得注意的是,如果您在控制器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>

要解决此问题,请创建一个全局变量(即在Controller A或主控制器中):

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

然后添加一个&#39;全球&#39;点击和显示变量的前缀:

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

有关详细信息,请查看Nested States & Nested Views in the Angular-UI documentationwatch a video或阅读understanding scopes

答案 4 :(得分:0)

如果您有多个带子菜单的菜单,则可以使用以下解决方案。

<强> 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')。此功能将用于切换菜单,并在下面的代码中进行说明。 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。初始加载页面时,它会将菜单设置为关闭。如果你有两个以上的子菜单相应添加。

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()函数。 您可以根据需要修改代码。 希望这会有所帮助。祝你有美好的一天:)

答案 5 :(得分:0)

以下是使用ngclick&amp; amp;&amp; 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>