路由-Ng-隐藏,Ng显示AngularJS
我有一个基本的HTML文件仪表板。在仪表板中,我包含了一个带有菜单的标题HTML文件。内容tml文件。使用ng include的页脚HTML文件。路由-Ng-隐藏,Ng显示AngularJS,angularjs,angularjs-directive,angularjs-ng-repeat,angularjs-routing,Angularjs,Angularjs Directive,Angularjs Ng Repeat,Angularjs Routing,我有一个基本的HTML文件仪表板。在仪表板中,我包含了一个带有菜单的标题HTML文件。内容tml文件。使用ng include的页脚HTML文件。 现在我想点击标题HTML文件上的菜单。单击之后,内容HTML应该隐藏,一个名为equity的新HTML页面应该取代它。如何通过单击菜单来实现这一点。帮帮我。我是angularjs新手看看angularjs中的路由和ng视图,我在这里举一个简单的例子 这是你的js var app = angular.module('yiiframe-routingAp
现在我想点击标题HTML文件上的菜单。单击之后,内容HTML应该隐藏,一个名为equity的新HTML页面应该取代它。如何通过单击菜单来实现这一点。帮帮我。我是angularjs新手看看angularjs中的路由和ng视图,我在这里举一个简单的例子 这是你的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>
{{c.text}}
{{u.id{u用户}{{u.name}{{u.email}{{u.gender}}{{u.address}
您可以使用ngRoute来实现这一点。
对内容使用ng视图而不是ng include。
在
$routeProvider
中分别定义初始内容和权益页面。单击链接,使用href进入权益页面。您可以使用ngRoute。您想查看的是angular route,上面有大量教程。这是一只扑克牌-