Routing - 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: '[e-mail]', gender: 'Male', address: '3172/49 Faridabad'},
            {ID: '2', name: 'Aditi', email: '[e-mail]', gender: 'Female', address: 'Faridabad'},
            {ID: '3', name: 'Nitin', email: '[e-mail]', gender: 'Male', address: 'Faridabad'},
            {ID: '4', name: 'Karan', email: '[e-mail]', gender: 'Male', address: 'Faridabad'},
            {ID: '5', name: 'Sachita Sharma', email: '[e-mail]', gender: 'Female', address: 'Delhi'},
            {ID: '6', name: 'Seema Pal', email: '[e-mail]', gender: 'Female', address: 'Delhi'},
            {ID: '7', name: 'Nikhil', email: '[e-mail]', gender: 'Male', address: 'Faridabad'},
            {ID: '8', name: 'Naveen', email: '[e-mail]', gender: 'Male', address: 'Faridabad'},
            {ID: '9', name: 'Hemraj', email: '[e-mail]', gender: 'Male', address: 'Faridabad'},
            {ID: '10', name: 'Mohit', email: '[e-mail]', gender: 'Male', address: 'Faridabad'},
        ];
    });

这将是您的主布局文件

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

这是您的列表用户.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>