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>

路由 - Ng -hide，Ng-show AngularJS

2 个答案: