我在一个标签中有一个表单，另一个标签中提交了应用程序列表。
如果我单击表单上的edit，我应该从数据库加载数据并转到另一个选项卡。在ng-click，我可以检索数据，但无法更改标签。
以下是相关文件： navbar.html
<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"></a>
</div>
<div class="header-right">
<a href="" ng-click="logout()" class="btn btn-danger" title="Logout"><i class="fa fa-sign-out fa-2x"></i></a>
</div>
</nav>
<!-- /. NAV TOP -->
<nav class="navbar-default navbar-side" role="navigation" style="width:200px">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<div class="inner-text">
{{user.name}}
<br />
<small> </small>
</div>
</div>
</li>
<li>
<a id="page1" ng-class='{"active-menu": selectedMenu == "dashboard"}' ui-sref="secured.dashboard" ng-click='selectedMenu = "dashboard"'><i class="fa fa-dashboard "></i>Dashboard</a>
</li>
<li>
<a id="page2" ng-class='{"active-menu": selectedMenu == "applicationForm"}' ui-sref="secured.applicationForm" ng-click='selectedMenu = "applicationForm"'><i class="fa fa-handshake-o "></i>Application Forms</a>
</li>
<li>
<a ng-class='{"active-menu": selectedMenu == "logout"}' href="" ng-click="logout()" ng-click='selectedMenu = "logout"'><i class="fa fa-sign-out fa-fw"></i> Logout</a>
</li>
</ul>
</div>
</nav>
dashboard.html：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard For Applications</title>
</head>
<body>
<div id="wrapper">
<div id="page-wrapper">
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<h1 class="page-head-line">
<div class="alert alert-danger">
DASHBOARD
</div>
</h1>
<h1 class="page-subhead-line">
<div class="alert alert-info">
Welcome! Here is the list of applications you have saved or submitted. <br><br>
</div>
</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Applications List</h3>
</div>
<div class="panel-body">
<table ng-if="applicationList" st-table="applicationTable" class="table table-striped">
<tr>
<th>Application Number</th>
<th>Project Title</th>
<th>Project Description</th>
<!-- <th>DataSet Available</th> -->
<!-- <th>Impact</th> -->
<th>Number of Interns</th>
<th>Expected SkillSet</th>
<th>Software Licenses Needed</th>
<th>Hardware Requirements</th>
<th></th>
<th></th>
</tr>
<tbody>
<tr ng-repeat="application in applicationList">
<td class="col-md-2">{{application.number}}</td>
<td class="col-md-2">{{application.title}}</td>
<td class="col-md-2">{{application.description}}</td>
<!-- <td><span ng-repeat='area in idt.areas'>{{area}}, </span></td> -->
<!-- <td class="col-md-2">{{application.technical}}, {{application.business}}</td> -->
<td class="col-md-2">{{application.numberOfInterns}}</td>
<td class="col-md-2">{{application.skillSet}}</td>
<td class="col-md-2">{{application.software}}</td>
<td class="col-md-2">{{application.hardware}}</td>
<td><button class="btn btn-danger" ng-click="remove(application._id)" ng-show="application.state=='saved'">Delete</button></td>
<td><button class="btn btn-warning" ng-click="selectedMenu='applicationForm'; edit(application._id)" ng-show="application.state=='saved'">Edit</button></td>
<!-- <td><button class="btn btn-warning" ng-click="selectedMenu='dashboard'; edit(application._id)" ng-show="application.state=='saved'">Edit</button></td> -->
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- /. ROW -->
<hr />
</div>
<!--/.ROW-->
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
</div>
<!-- /. WRAPPER -->
</body>
</html>
dashboard.js：
(function() {
var app = angular.module('dashboard', []);
app.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('secured.dashboard', {
url: '/dashboard',
controller: 'DashboardController',
templateUrl: '/views/dashboard.html'
});
}]);
app.controller('DashboardController', ['$scope', 'AuthService', 'user', '$state', '$http', function($scope, AuthService, user, $state, $http) {
$scope.user = user;
AuthService.setUser(user);
$scope.logout = function() {
AuthService.logout().then(function() {
$scope.user = null;
$state.go('unsecured');
})
}
var refresh = function(){
$http.get('/application/applicationList').then(function(response){
console.log("I got the applications I requested");
$scope.applicationList = response.data;
console.log($scope.applicationList);
$scope.pagination = {};
// $scope.totalItems = 200;
$scope.pagination.currentPage = 0;
$scope.numPerPage = 10;
});
};
refresh();
$scope.remove = function(id){
var del = false;
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
focusCancel: true,
allowEscapeKey: true,
allowEnterKey: true,
allowOutsideClick: true,
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false
}).then(function () {
$http.delete('/application/applicationlist/'+id).then(function(response){
clear();
refresh();
});
swal(
'Deleted!',
'Your Application has been deleted.',
'success'
)
}, function (dismiss) {
// dismiss can be 'cancel', 'overlay',
// 'close', and 'timer'
if (dismiss === 'cancel') {
swal(
'Cancelled',
'Your Application is safe :)',
'error'
)
}
})
};
$scope.edit = function(id){
console.log(id);
console.log("Edit function called");
$http.get('/application/applicationList/'+id).then(function(response){
$scope.application = response.data;
console.log($scope.application);
//refresh();
$scope.changeTab(event, 'page1');
});
};
var clear = function(){
$scope.application = {
technical: false,
business: false
};
};
}]);
})();
applicationForm.js：
(function() {
var app = angular.module('applicationForm', []);
app.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('secured.applicationForm', {
url: '/applicationForm',
controller: 'applicationFormController',
templateUrl: '/views/applicationForm.html'
});
}]);
app.controller('applicationFormController', ['$http', '$scope', '$state', '$uibModal', function($http, $scope, $state, $uibModal) {
$scope.application = {
technical: false,
business: false
};
var refresh = function(){
$http.get('/application/applicationList').then(function(response){
console.log("I got the applications I requested");
$scope.applicationList = response.data;
console.log($scope.applicationList);
$scope.pagination = {};
// $scope.totalItems = 200;
$scope.pagination.currentPage = 0;
$scope.numPerPage = 10;
});
};
refresh();
$scope.saveApplication = function(){
console.log($scope.application);
console.log($scope.applicationList);
var check = 0;
$scope.application.state = "saved";
$scope.application.userEmail = $scope.user.email;
for (var i=0, len=$scope.applicationList.length; i < len; i++) {
if ($scope.applicationList[i]._id == $scope.application._id) {
check = 1;
console.log("matched");
break;
}
}
if(check == 1){
$http.put('/application/applicationlist/' + $scope.application._id, $scope.application).then(function(response){
//$scope.contact = response.data;
refresh();
});
}
else{
$http.post('/application/applicationList', $scope.application).then(function(response){
console.log(response);
refresh();
});
}
swal({
title: "Great!",
text: "We have saved your application",
type: "success",
timer: 3000,
confirmButtonText: "Wohoo!"
});
clear();
};
$scope.submitApplication = function(){
console.log("Submit called");
console.log($scope.application.title);
console.log($scope.user.email);
$scope.application.userEmail = $scope.user.email;
$scope.application.state = "submit";
var check = 0;
for (var i=0, len=$scope.applicationList.length; i < len; i++) {
if ($scope.applicationList[i]._id == $scope.application._id) {
check = 1;
console.log("matched");
break;
}
}
if(check == 1){
$http.put('/applicationlist/' + $scope.application._id, $scope.application).then(function(response){
refresh();
});
}
else{
$http.post('/application/applicationList', $scope.application).then(function(response){
console.log("Successfully submitted");
refresh();
});
}
swal({
title: "Great!",
text: "We have received your request",
type: "success",
timer: 3000,
confirmButtonText: "Wohoo!"
});
clear();
};
var clear = function(){
$scope.application = {
technical: false,
business: false
};
};
//Universities
$scope.application.selectname1={id:100,name: 'None'};
$scope.application.selectname2={id:100,name: 'None'};
$scope.application.selectname3={id:100,name: 'None'};
$scope.filter1 = function(item){
return (!($scope.application.selectname1&&$scope.application.selectname1.id)||item.id !=$scope.application.selectname1.id||item.id==100);
};
$scope.filter2 = function(item){
return (!($scope.application.selectname2&&$scope.application.selectname2.id)||item.id!=$scope.application.selectname2.id||item.id==100);
};
$scope.filter3 = function(item){
return (!($scope.application.selectname3&&$scope.application.selectname3.id)||item.id !=$scope.application.selectname3.id||item.id==100);
};
$scope.universities = [
{
id:1,
name: 'IITs'
},
{
id:2,
name: 'IIITs'
},
{
id:3,
name: 'BITS'
},
{
id:4,
name: 'IISc'
},
{
id:100,
name: 'None'
}
];
//Degrees
$scope.application.selectdegree1={id:100,name: 'None'};
$scope.application.selectdegree2={id:100,name: 'None'};
$scope.application.selectdegree3={id:100,name: 'None'};
$scope.filterDegree1 = function(item){
return (!($scope.application.selectdegree1&&$scope.application.selectdegree1.id)||item.id !=$scope.application.selectdegree1.id||item.id==100);
};
$scope.filterDegree2 = function(item){
return (!($scope.application.selectdegree2&&$scope.application.selectdegree2.id)||item.id!=$scope.application.selectdegree2.id||item.id==100);
};
$scope.filterDegree3 = function(item){
return (!($scope.application.selectdegree3&&$scope.application.selectdegree3.id)||item.id !=$scope.application.selectdegree3.id||item.id==100);
};
$scope.degrees = [
{
id:1,
name: 'PhD'
},
{
id:2,
name: 'Masters'
},
{
id:3,
name: 'BTech'
},
{
id:100,
name: 'None'
}
];
$scope.pageChanged = function() {
//alert('Page changed to: ' + $scope.pagination.currentPage);
//$scope.pagination.currentPage = page;
var begin = (($scope.pagination.currentPage - 1) * $scope.numPerPage);
//var end = begin + $scope.numPerPage;
$scope.getPatents(begin)
};
}]);
})();
答案 0 :(得分：2)
<div ui-view></div>后嵌入在app.html父状态中显示的dashboard.html内容的/dashboard标记：
$stateProvider
.state('login', {
url: "/login",
templateUrl: 'pages/login.html',
controller: 'LoginController',
data: {
requireLogin: false
}
})
.state('app', {
abstract: true,
url: '/app',
templateUrl: 'views/app.html',
data: {
requireLogin: true
}
})
.state('app.dashboard', {
url: '/dashboard',
controller: 'DashboardCtrl',
templateUrl: 'pages/map.html',
data: {
requireLogin: true
}
});