我正在尝试根据menuIds在主页上显示菜单（index.html）。
当用户登录时，通过对后端服务器的http请求，基于用户角色获取menuIds。
我在cookies（login.js）中设置这些menuIds
ng-if指令用于隐藏/显示特定菜单。
这是index.html文件：
<!DOCTYPE HTML>
<html ng-app="InvoiceApp">
<head>
<title>Invoicing System</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/vendor/angular-1.2.6/angular.min.js"></script>
<script type="text/javascript" src="/vendor/angular-1.2.6/angular-route.min.js"></script>
<link href='/vendor/bootstrap/css/bootstrap.min.css' rel='stylesheet' />
<script type="text/javascript" src="/vendor/angular-ui/ui-bootstrap-tpls-0.12.0.js"></script>
<script type="text/javascript" src="/vendor/angular-1.2.6/angular-cookies.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/finance/js/adjustments-controllers.js"></script>
<script type="text/javascript" src="/finance/js/invoice-controllers.js"></script>
<script type="text/javascript" src="/finance/js/finance-services.js"></script>
<link rel="icon" href="/img/favicon.ico" >
<link href='/css/main.css' rel='stylesheet' />
<link href='/css/dashboard.css' rel='stylesheet' />
</head>
<body>
<div class="container-fuild">
<div class="row header">
<div class="col-lg-2">
<img src="/img/rbOutlineLogo.png" height="64px" style = "margin-top:15px; margin-left:20px"/>
</div>
<div class="col-lg-10" style="margin-top:15px">
<img src="/img/cis_logo_new.png" height="64px">
</div>
</div>
<div class="row body">
<div class="col-lg-2" ng-controller="SidebarCtrl">
<div class="nav">
<ul class="nav nav-pills nav-stacked" style="padding-top:7px">
<li class="dropdown navBarStyle" ng-if = "**menuList.indexOf(1) !== -1**">
<a href class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-th-list"></span>
View Invoice
<span class="caret"></span>
</a>
<ul class="dropdown-menu nav nav-pills nav-stacked" role="menu">
<li class="navBarStyle">
<a href="#/viewByBOCode">
<span class="glyphicon glyphicon-th">
By BO Code & Date Range
</span>
</a>
</li>
<li class="navBarStyle">
<a href="#/viewByInvoiceNumber">
<span class="glyphicon glyphicon-th">
By Invoice Number
</span>
</a>
</li>
</ul>
</li>
<li class="navBarStyle" ng-if = "**menuList.indexOf(2)** !== -1">
<a href="#/configureBO">
<span class="glyphicon glyphicon-edit"></span>
Configure BO
</a>
</li>
<li class="navBarStyle" ng-if = "**menuList.indexOf(3)** !== -1">
<a href="#/approveBO">
<span class="glyphicon glyphicon-edit"></span>
Configure BO Status
</a>
</li>
<li class="navBarStyle" ng-if = "**menuList.indexOf(4)** !== -1">
<a href class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-th-list"></span>
Download Reports
<span class="caret"></span>
</a>
<ul class="dropdown-menu nav nav-pills nav-stacked" role="menu">
<li class="navBarStyle">
<a href="#/generateReport">
<span class="glyphicon glyphicon-download-alt"></span>
Invoice & Transaction History Reports
</a>
</li>
<li class="navBarStyle">
<a href="#/yourBusPendingAdjustmentMemos">
<span class="glyphicon glyphicon-download-alt"></span>
YourBus Pending Adjustment Memos
</a>
</li>
</ul>
</li>
<li class="navBarStyle" ng-if = "menuList.indexOf(5) !== -1">
<a href="#/uploadExcelFile">
<span class="glyphicon glyphicon-upload"></span>
Upload Payment Details
</a>
</li>
<li class="navBarStyle" ng-if = "menuList.indexOf(6) !== -1">
<a href="#/summary/operator/">
<span class="glyphicon glyphicon-th"></span>
Operator Dashboard
</a>
</li>
<li class="navBarStyle" ng-if = "menuList.indexOf(7) !== -1">
<a href="#/adjusmentsMemo">
<span class="glyphicon glyphicon-check"></span>
Create Adjustment Memo
</a>
</li>
<li class="dropdown navBarStyle" ng-if = "menuList.indexOf(8) !== -1">
<a href class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-check"></span>
Advance Payment Adjustments
<span class="caret"></span>
</a>
<ul class="dropdown-menu nav nav-pills nav-stacked"
ng-if = "menuList.indexOf(9) !== -1 || menuList.indexOf(10) !== -1 || menuList.indexOf(11) !== -1" role="menu">
<li class="navBarStyle"
ng-if = "menuList.indexOf(9) !== -1">
<a href="#/doAdvancePayment">
<span class="glyphicon glyphicon-edit"></span>
Do Adjustment
</a>
</li>
<li class="navBarStyle" ng-if = "menuList.indexOf(10) !== -1">
<a href="#/approveAdvanceAdjustment">
<span class="glyphicon glyphicon-edit"></span>
Approve Adjustments
</a>
</li>
<li class="navBarStyle"
ng-if = "menuList.indexOf(11) !== -1">
<a href="#/approvedAdvanceAdjustments">
<span class="glyphicon glyphicon-edit"></span>
View Approved Adjustments
</a>
</li>
</ul>
</li>
<li class="dropdown navBarStyle" ng-if = "menuList.indexOf(12) !== -1">
<a href class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-check"></span>
Other Adjustments
<span class="caret"></span>
</a>
<ul class="dropdown-menu nav nav-pills nav-stacked"
ng-if = "menuList.indexOf(13) !== -1 || menuList.indexOf(14) !== -1 || menuList.indexOf(15) !== -1 || menuList.indexOf(16) !== -1" role="menu">
<li class="navBarStyle" ng-if = "menuList.indexOf(13) !== -1">
<a href="#/doOtherAdjustments">
<span class="glyphicon glyphicon-edit"></span>
Do Adjustments for Today
</a>
</li>
<li class="navBarStyle" ng-if = "menuList.indexOf(14) !== -1">
<a href="#/viewAdjustments">
<span class="glyphicon glyphicon-edit"></span>
View Adjustments
</a>
</li>
<li class="navBarStyle" ng-if = "menuList.indexOf(15) !== -1">
<a href="#/invoiceAdjustments">
<span class="glyphicon glyphicon-edit"></span>
Approve Adjustments
</a>
</li>
<li class="navBarStyle" ng-if = "menuList.indexOf(16) !== -1">
<a href="#/approvedOtherAdjustments">
<span class="glyphicon glyphicon-edit"></span>
View Approved Adjustments
</a>
</li>
</ul>
</li>
<li ng-if = "menuList.indexOf(17) !== -1" style="background-color: #eee; border-radius:5px">
<a href="#/generateInvoice">
<span class="glyphicon glyphicon-th"></span>
Generate Invoice
</a>
</li>
<li>
<a href="#/logout">
<span class="glyphicon glyphicon-off"></span>
Logout
</a>
</li>
<li>
<a target="_blank" href="https://docs.google.com/document/d/12MMSYpfvCI0A694L5ujOnHziOU71Mhce-iRx99jeFU8/pub?embedded=true">
<span class="glyphicon glyphicon-question-sign"></span>
FAQ
</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-10" style="border-left: 1px solid #F0EDED; min-height:528px">
<div ng-view>This is main page.</div>
</div>
</div>
<div class="row footer" style="padding:10px">
<span class="glyphicon glyphicon-copyright-mark"></span>
<script>document.write(new Date().getFullYear())</script> ibibogroup All rights reserved
</div>
</div>
</body>
</html>
以下是基于用户获取menuIds的login.js逻辑：
var url = '/api/user/login/ui';
$http.post(url, {
userName: $scope.credential.email,
password: $scope.credential.password
}).success(function(data, status, headers, config) {
**$cookies.menuList = data;
$window.location.href = 'index.html';**
}).error(function(data, status, headers, config) {
if (status === 400) {
$scope.errors.push("Invalid Credential, please try again.");
} else {
$scope.errors.push("Service not available currently, please try again after some time.");
}
});
这是index.html的控制器
angular.module('**InvoiceControllers**', ['ngCookies'])
.controller('**SidebarCtrl**', function($scope, $cookies, $log, $window) {
**$scope.menuList = [];
$scope.menuList = $cookies.permissions;**
$log.info($scope.menuList);
if (angular.isUndefined($scope.menuList)) {
$window.location.href = 'login.html';
}
});
但在加载index.html时，
片段 - ＆gt; ng-if = "menuList.indexOf(menu_id) !== -1"
没有用。
我在做什么呢？
答案 0 :(得分：0)
你可以这样使用
data-ng-if = "menuList.map(function(x) {return x.id; }).indexOf(menu_id) != -1"
但是如果使用方法
则更好data-ng-if = "getMenuStatus(menu_id)"
$scope.getMenuStatus = function(menu_id)
{
return menuList.map(function(x) {return x.id; }).indexOf(menu_id) !== -1;
}
我认为它会起作用