在angularjs中，点击导航菜单显示内容

Display content on click of navigation menu in angularjs

本文关键字：菜单 显示 导航 angularjs      更新时间：2023-09-26

我的html页面包含两个部分。左边是导航(代码如下)，右边是显示各自导航菜单的内容。

当点击每个导航菜单时，特定的部分应该呈现在我的内容部分。

我已经使用ng-show/ng-hide在我的js文件中设置标志。但是，由于我为每个部分设置标志和显示/隐藏，我的js代码文件看起来很奇怪。我知道这不是正确的做法。

我是angularjs的新手。请帮助我有效地做到这一点。

HTML代码:(only navigation part)

<div class="col-md-2">
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#Home" data-toggle="collapse" data-target="#Login">Home</a></li>
        <div class="collapse" id="Login">
            <ul class="nav nav-pills nav-stacked">
                <li><a class="glyphicon glyphicon-log-in" href="#" ng-click="LoginScreen()">Login</a></li>
                <li><a class="glyphicon glyphicon-user" href="#" ng-click="RegisterScreen()">Register</a></li>
            </ul>
        </div>
        <li><a href="#Contact" data-toggle="collapse" data-target="#Contact">About</a></li> 
        <div class="collapse" id="Contact">
            <ul class="nav nav-pills nav-stacked">
                <li><a class="glyphicon glyphicon-save" href="#" ng-click="LoadUserDetailsScreen()">LoadUserDetails</a></li>
                <li><a class="glyphicon glyphicon-phone-alt" href="#">Contact</a></li>
            </ul>
        </div>
    </ul>
</div>

JS代码:

var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {
  $scope.FlagHomeScreen = true;
  $scope.LoadData=false;
  $scope.showtable=false;
  $scope.showstatus=false;
  $scope.FlagLoginScreen = false;
  $scope.RegisterScreenFlag= false;
  $scope.menuitems =[10,20,30];
  $scope.LoginScreen = function(){
    $scope.FlagLoginScreen = true;
    $scope.FlagHomeScreen =false;
    $scope.LoadData=false;
    $scope.RegisterScreenFlag=false;
  };
  $scope.LoadUserDetailsScreen =function(){
    $scope.LoadData=true;
    $scope.FlagLoginScreen = false;
    $scope.FlagHomeScreen =false;
    $scope.RegisterScreenFlag=false;
  };
  $scope.RegisterScreen=function(){
    $scope.RegisterScreenFlag=true;
    $scope.LoadData=false;
    $scope.FlagLoginScreen = false;
    $scope.FlagHomeScreen =false;
  };
});

你可以在应用中使用ui-router来处理导航。对于你的情况，你需要一个主模板，其中包括你的导航栏，在你的应用程序的每个状态，你想显示不同的视图。

下面是一个演示如何使用ui-router来处理视图的示例。为了清晰起见，我在下面的示例中只实现了登录和用户详细信息。你可以自己添加剩余的部分，这对你来说将是一个很好的练习。

定义你的状态:

var myApp = angular.module('myApp', ['ui.router'])
    .config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('home', {
        url: "/",
        template: '<div ui-view=""/>' // templates of child states will fill components with ui-view attribute
    })
    .state('home.userDetails', {
        url: "userDetails",
        template: '<div>user details</div>',
        controller: "UserDetailsCtrl"
    })
    .state('home.login', {
        url: "login",
        //templateUrl: "path/to/login.html" // instead of giving inline templates as below, you can include your template into a html file, and use it in your state by templateUrl property
        template: '<div>user login</div>',
        controller: "LoginCtrl"
    })
}])

你可以使用ui-sref来导航你的状态，而不是使用ng-show和ng-click。

<div class="col-md-2">
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#Home" data-toggle="collapse" data-target="#Login">Home</a></li>
        <div class="collapse" id="Login">
            <ul class="nav nav-pills nav-stacked">
                <li><a class="glyphicon glyphicon-log-in" ui-sref="home.login">Login</a></li>
                <li><a class="glyphicon glyphicon-user" href="#" ng-click="RegisterScreen()">Register</a></li>
            </ul>
        </div>
        <li><a href="#Contact" data-toggle="collapse" data-target="#Contact">About</a></li> 
        <div class="collapse" id="Contact">
            <ul class="nav nav-pills nav-stacked">
                <li><a class="glyphicon glyphicon-save" ui-sref="home.userDetails">LoadUserDetails</a></li>
                <li><a class="glyphicon glyphicon-phone-alt" href="#">Contact</a></li>
            </ul>
        </div>
    </ul>
</div>
<div ui-view=""/>

不要忘记查看ui-router的文档:http://angular-ui.github.io/ui-router/site//api

JSFiddle:http://jsfiddle.net/7tzXh/48/

相关文章：