如何使用Angular JS ng-hide隐藏div

Question

I have a page with a div which contains a jumbotron, this is the first page that is display anytime the site is accessed. 我有一个带有div的页面，该页面包含一个巨无霸，这是在访问该网站时显示的第一个页面。 On this page I have some links which link to different pages using the '$routeProvide'/angular. 在此页面上，我有一些链接使用'$ routeProvide'/ angular链接到不同的页面。 I want to hide the jumbotron from the other links/pages but I am not sure how to do that. 我想在其他链接/页面中隐藏超大屏幕，但是我不确定该怎么做。

main page : 主页：

<body ng-app="single-page-app">
    <div ng-controller="cfgController">
        <div>
        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
            <div class="navbar-header col-md-12 col-sm-12 logo">
                <a href="index.html"><img src="img/gilgal.png" class="img-responsive center-block" alt="Responsive image"></a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="container-fluid col-md-9 col-sm-12 hidden-xs col-md-offset-2">
              <ul class="nav navbar-nav" id="navbar">
                <li class="navlink"><a href="#/about">About Us</a></li>
                <li class="navlink"><a href="#/advService">Advisory Service</a></li>
                <li class="navlink"><a href="#/imService">Investment Service</a></li>
                <li class="navlink"><a href="#/greService">Infrastructure Development</a></li>
                <li class="navlink"><a href="#/contact">Contact</a></li>
              </ul>
            </div>
        </div>
        </nav>
        </div>
        <div class="jumbotron" ng-hide="hideme">
        <div class="container-fluid">
            <div class="row jumb">
                <div class="col-md-4 col-md-offset-1 head-card">
                    <h4 class="head-text">ADVISORY SERVICES</h4>
                    <p class="head-desc">We provide Corporate Finance Advisory Services for private and public institutions in Sub-Saharan Africa</p>
                </div>
                <div class="col-md-2"></div>
                <div class="col-md-4 head-card">
                    <h4 class="head-text">INVESTMENT MANAGEMENT SERVICES</h4>
                    <p class="head-desc">We focus on Real Estate and Infrastructural Projects in Sub-Saharan Africa</p>
                </div>
            </div>
            </div>
        </div> 
        <div ng-view>

        </div>
        <div class="container-fluid col-md-12 foot">
            <p class="col-md-offset-1">All content copyright of Gilgal Capital Limited 2015 | Branding and Website by Ashebby</p>
        </div>
    <!-- Angular Route.js -->
    <script src="js/angular-route.min.js"></script>
    <!-- Angular.js -->
    <script src="js/angular.min.js"></script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    </div>
  </body>

here is my script.js 这是我的script.js

var app=angular.module('single-page-app',['ngRoute']);


app.config(function($routeProvider){
      $routeProvider
          .when('/index',{
                templateUrl: 'index.html'
          })  
          .when('/about',{
                templateUrl: 'about.html'
          })
            .when('/advService',{
                templateUrl: 'advService.html'
          })
            .when('/imService',{
                templateUrl: 'imService.html'
          })
            .when('/greService',{
                templateUrl: 'greService.html'
          })
            .when('/contact',{
                templateUrl: 'contact.html'
          });


});
app.controller('cfgController'['$Scope', function($scope) {

$Scope.hideme = false;

$Scope.$on('$locationChangeStart', function(event) {
    $scope.hideme = true;
});

}]);

here is a typical link to a different page about.html : 这是指向不同页面about.html的典型链接：

<div class="container-fluid col-md-12 about-us">
        <div class="about-us col-md-offset-1">
            <h2 class="col-md-10">
                <span class="title2">About Us</span>
                <div class="line"></div>
            </h2>
            <p class="col-md-10 article">text</p>
        </div>
</div>

Answer 1

Is that really hard... So ng-hide is easy to use 这真的很难吗...所以ng-hide易于使用

To hide a div just do this : 要隐藏div只需执行以下操作：

 <div ng-hide="hideme">your content </div>

and in your controller you define hideme variable like this : 然后在您的控制器中定义hideme变量，如下所示：

  $scope.hideme = true; // true to hide ,false to show

Edit: So in your case do this : 编辑：所以就您而言：

  <li class="navlink"><a ng-click="hideIt()" href="#/about">About Us</a></li>

In your controler make a fucntion hideIt to hide the jumbotron div : 在您的控制器中进行一次hidee功能，以隐藏巨无霸div：

   $scope.hideIt = function(){
     $scope.hideme = true;
     }

Answer 2

app.run(['$rootScope', function($rootScope) {

$rootScope.hideme = false;

$rootScope.$on('$routeChangeStart', function(){
    $rootScope.hideme = true;

});

Along with your code, just add this run block. 连同您的代码，只需添加此运行块。 It should work. 它应该工作。

如何使用Angular JS ng-hide隐藏div

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-06-12 11:57:43

解决方案2
0 2015-06-12 12:11:28

如何使用Angular JS ng-hide隐藏div

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-06-12 11:57:43

解决方案2 0 2015-06-12 12:11:28

解决方案1
0 已采纳 2015-06-12 11:57:43

解决方案2
0 2015-06-12 12:11:28