路由 - Ng -hide , Ng-show AngularJS

Question

我有一个基本的 HTML 文件仪表板。在仪表板中，我包含了一个带有菜单的标题 HTML 文件。 .一个内容tml文件。使用 ng-include 的页脚 HTML 文件。 现在我想单击标题 HTML 文件上的菜单。单击后，内容 HTML 应该隐藏，并且一个名为Equity 的新 HTML 页面应该取而代之。如何在单击菜单时实现这一点。帮帮我 。我是 angularjs 的新手

Answer 1

您可以使用 ngRoute 来实现这一点。 代替 ng-include，对内容使用 ng-view。 在$routeProvider 中分别定义初始内容和权益页面。单击链接后，使用 href 转到权益页面。

Answer 2

看一下angularjs中的路由和ng-view我在这里放一个简单的例子

这是你的 js

var app = angular.module('yiiframe-routingApp', ['ngRoute']);
    app.config(['$routeProvider',
      function($routeProvider) {
        $routeProvider.
        when('/', {
          title: 'users',
          templateUrl: 'list-users.html',
          controller: 'userController'
        })
        .otherwise({
          redirectTo: '/'
        });;
    }]);

app.controller('userController', function ($scope) {
    $scope.columns = [
        {text:"ID",predicate:"id",sortable:true,dataType:"number"},
        {text:"Name",predicate:"name",sortable:true},
        {text:"Email",predicate:"email",sortable:true},
        {text:"Gender",predicate:"gender",sortable:true},
        {text:"Address",predicate:"address",reverse:true,sortable:true},
    ];
        $scope.users = [
            {ID: '1', name: 'Kuldeep Dangi', email: 'kuldeep.dangi@yiiframe.com', gender: 'Male', address: '3172/49 Faridabad'},
            {ID: '2', name: 'Aditi', email: 'aditi@yiiframe.com', gender: 'Female', address: 'Faridabad'},
            {ID: '3', name: 'Nitin', email: 'nitin@yiiframe.com', gender: 'Male', address: 'Faridabad'},
            {ID: '4', name: 'Karan', email: 'karan@yiiframe.com', gender: 'Male', address: 'Faridabad'},
            {ID: '5', name: 'Sachita Sharma', email: 'sachita@yiiframe.com', gender: 'Female', address: 'Delhi'},
            {ID: '6', name: 'Seema Pal', email: 'seema@yiiframe.com', gender: 'Female', address: 'Delhi'},
            {ID: '7', name: 'Nikhil', email: 'nikhil@yiiframe.com', gender: 'Male', address: 'Faridabad'},
            {ID: '8', name: 'Naveen', email: 'naveen@yiiframe.com', gender: 'Male', address: 'Faridabad'},
            {ID: '9', name: 'Hemraj', email: 'hemraj@yiiframe.com', gender: 'Male', address: 'Faridabad'},
            {ID: '10', name: 'Mohit', email: 'mohit@yiiframe.com', gender: 'Male', address: 'Faridabad'},
        ];
    });

这里是你的主要布局文件

<div class="container">
        <div class="page-content">
            <div ng-view="" id="ng-view"></div>
        </div>
</div>

这是您的 list-users.html

<table class="table table-striped">
    <tr><th ng-repeat="c in columns">{{c.text}}</th></tr>

    <tr ng-repeat="u in users | orderBy:'-id_user'" id="{{u.id_user}}">
        <td>{{u.id_user}}</td><td>{{u.name}}</td><td>{{u.email}}</td><td>{{u.gender}}</td><td>{{u.address}}</td>
    </tr>
</table>