我正在开发一个使用AngularJS＆amp;引导。在我的应用程序中，主仪表板上有一个bootstrap模式。此模式显示在切换按钮上。在主仪表板中有一些图表和图表。网格。用于绘制这些图表和网格的输入字段来自该模态。
这是主要的仪表板html。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- angularJS scripts -->
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="../mvc/constants/constants.js"></script>
<script src="../mvc/service/Service.js"></script>
<script src="../mvc/controller/DashboardController.js"></script>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- KENDO scripts for creating charts -->
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body ng-controller="DashboardController" ng-init="initModal()">
<div id="mainContainer">
<div class="demo-section k-content wide">
<div class="col-xs-8">
<h1 style="padding-left: 15px">
HotelName<i class="fa fa-pencil-square-o"
style="color: #6789DA; cursor: pointer; position: relative; top: -10px; font-size: 27px;"
data-toggle="modal" data-target="#hotelDetailModal"></i>
</h1>
<h5 style="padding-left: 15px">{{packageString}}</h5>
<h5 style="padding-left: 15px">{{requestRoomTypeName}}</h5>
</div>
<div class="col-xs-4">
<!-- ng-click="initialMethod()" -->
<h4 style="text-align: right; margin-top: 14px; margin-right: 20px;">{{algoName}}
</h4>
<h6 style="padding-right: 20px; float: right">{{startDateString}}
{{endDateString}}</h6>
<!-- <button type="submit" class="btn btn-default"
style="margin-right: 20px; margin-bottom: 20px; margin-top: 2px; float: right;"
data-toggle="modal" data-target="#changeSearch"
ng-click="initialMethod()">Edit criteria</button> -->
</div>
<!-- </div> -->
</div>
<div class="col-md-12">
<div id="grid" class="demo-section k-content wide"></div>
</div>
<div id="example" class="col-md-12">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
</div>
<div id="chartContainer" class="col-md-7">
<div id="competitorPriceChart"></div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="hotelDetailModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1>Hotel Details</h1>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-6">
<label>Schema Type</label> <select
class="form-control" required="required"
ng-model="schemaType"
ng-change="changeSchemaType()">
<option value="0">Hotel</option>
<option value="1">Destination</option>
</select>
</div>
<div class=col-xs-6>
<label>Sub Type</label> <select
class="form-control" id="subType"
ng-options="sub_type.cityCode for sub_type in subTypeList"
ng-model="subType" required="required"
ng-change="getHotelDataByDestination()"
value="{{sub_type.cityName}}">
<option value="" disabled selected hidden=true>Select
Option
</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label>Hotel</label>
</div>
<div class="col-xs-12">
<select class="form-control"
ng-options="hotel.hotelName for hotel in hotelList"
ng-model="hotel" required="required"
value="{{hotel}}"
ng-change="getRoomTypeByHotelName();getMealPlanByHotelName();">
<option value="" disabled selected hidden=true>Select
Option
</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label>Room Type</label> <select
class="form-control"
ng-options="roomType.roomTypeName for roomType in roomTypeList"
ng-model="roomType" required="required"
value="{{roomType}}">
<option value="" disabled selected hidden=true>Select
Option
</option>
</select>
</div>
<div class="col-xs-6">
<label>Meal Plan</label> <select
class="form-control"
ng-options="mealPlan.description for mealPlan in mealPlanList"
ng-model="mealPlan" required="required"
value="{{mealPlan}}">
<option value="" disabled selected hidden=true>Select
Option
</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<label>Rooms</label>
<input id="rooms"
class="form-control" required="required"
ng-model="rooms"
type="number"/>
</select>
</div>
<div class="col-xs-3">
<label>Adults</label>
<input id="adults"
class="form-control" required="required"
ng-model="adults"
type="number"/>
</select>
</div>
<div class="col-xs-3">
<label>Children</label>
<input id="kids"
class="form-control" required="required"
ng-model="kids"
type="number"/>
</select>
</div>
<div class="col-md-3">
<label>Nights</label>
<input id="nights"
class="form-control" required="required"
ng-model="nights"
type="number"/>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label style="margin: 15px 0">Departure Date</label> <input
type="date" class="form-control"
ng-model="departureDate">
</div>
</div>
<!-- <div class="row">
<div class="col-xs-6">
<button ng-click="detailCtrlViewModel.submit()"
class="btn btn-default" style="float: right;">Next</button>
</div>
</div> -->
</div>
<div class="modal-footer">
<button ng-click="submit()"
class="btn btn-primary" style="float: right;"
data-dismiss="modal">SUBMIT
</button>
</div>
</div>
</div>
</div>
当应用程序运行时，它应显示包含所有图表的主页面。网格。即页面加载时应该有输入的默认值。
模态体字段（下拉菜单）从数据库中填充。
我的 DashboardController 如下所示。
var myApp = angular.module('myApp', ['DataService']);
myApp.controller('DashboardController', function ($scope, DataService) {
$scope.rooms = 1;
$scope.adults = 1;
$scope.kids = 0;
$scope.nights = 7;
$scope.departureDate = new Date();
$scope.schemaType = 1;
$scope.caclulateOn = new Date().toISOString().slice(0, 10);
$scope.initModal = function () {
console.log('initModal');
$scope.changeSchemaType();
$scope.getHotelDataByDestination();
};
$scope.changeSchemaType = function () {
$scope.subTypeList = [];
if ($scope.schemaType == "0") {
$scope.subTypeList.push({
cityName : "5 star",
cityCode : "city1",
}, {
cityName : "4 star or above",
cityCode : "city2",
});
$scope.subType = $scope.subTypeList[0];
} else {
$scope.subTypeList.push({cityCode:"CITY1",cityName:"CITY1"},{cityCode:"city2",cityName:"city2"});
$scope.subType = $scope.subTypeList[0];
console.log($scope.subType);
}
}
$scope.getHotelDataByDestination = function () {
console.log($scope.subType);
console.log($scope.subType.cityCode);
var destinationCode = $scope.subType.cityCode;
DataService.getHotelByDestinationService(destinationCode).success(
function(data) {
$scope.hotelList = [];
for (var k = 0; k < data.length; k++) {
$scope.hotelList.push({hotelId: data[k].hotelId, hotelName:data[k].hotelName });
}
if(destinationCode == "CITY1"){
$scope.hotel = $scope.hotelList[17];
console.log($scope.hotel);
}else if(destinationCode == "CITY2"){
$scope.hotel = $scope.hotelList[2];
console.log($scope.hotel);
}else {
$scope.hotel = $scope.hotelList[0];
}
$scope.getRoomTypeByHotelName();
$scope.getMealPlanByHotelName();
}).error(function(error) {
console.log(error)
});
}
$scope.getRoomTypeByHotelName = function () {
console.log($scope.hotel);
var hotelName = $scope.hotel.hotelName;
DataService.getRoomTypeByHotelNameService(hotelName).success(
function(data) {
$scope.roomTypeList = [];
for (var k = 0; k < data.length; k++) {
$scope.roomTypeList.push({roomTypeName: data[k].roomTypeName });
}
$scope.roomType = $scope.roomTypeList[0];
}).error(function(error) {
console.log(error)
});
}
$scope.getMealPlanByHotelName = function () {
var hotelName = $scope.hotel.hotelName;
DataService.getMealPlanByHotelNameService(hotelName).success(
function(data) {
console.log(data)
$scope.mealPlanList= [];
for (var k = 0; k < data.length; k++) {
$scope.mealPlanList.push({code: data[k].code, description: data[k].description });
}
$scope.mealPlan = $scope.mealPlanList[0];
}).error(function(error) {
console.log(error)
});
}
$scope.submit = function () {
console.log('submit');
console.log($scope.rooms);
console.log($scope.adults);
console.log($scope.kids);
console.log($scope.nights);
console.log($scope.departureDate);
console.log($scope.hotel);
console.log($scope.roomType);
console.log($scope.mealPlan);
// call function to draw charts and grid
$scope.displayTableView($scope.hotel.hotelId, $scope.roomType.roomTypeName, $scope.departureDate, $scope.nights,
$scope.mealPlan.code);
$scope.initCompetitorPriceChart($scope.hotel.hotelId, $scope.departureDate, $scope.nights, $scope.mealPlan.code);
}
});
当页面加载时，它会调用 initModal 功能＆amp;填充模态中的所有下拉字段。但实际上我得到一个空页面，我切换模式我可以选择字段，单击提交按钮，然后绘制图表。最初它不会绘制任何图形或网格。我真正想要的是显示带有图表的主页面，应该为默认输入字段绘制这些图表（当模态加载时，默认值是下拉列表中的第一个元素）。再一次，一旦我从模态和模型中选择新值。提交它应该使用基于新选择的值的新图表重新加载主页面。
希望你清楚我提到的内容。任何建议都将受到高度赞赏。
已更新
这是
之后的回复DataService.getHotelByDestinationService(destinationCode).success(
function(data) {}
[{"hotelId":26047,"hotelCode":null,"hotelName":"Anahita Residence and Villas","rating":null,"cityCode":null,"holidayId":27751},{"hotelId":26341,"hotelCode":null,"hotelName":"Belle Mare Plage (Hotel CONSTANCE)","rating":null,"cityCode":null,"holidayId":27911},{"hotelId":26364,"hotelCode":null,"hotelName":"Blumarine Attitude Hotel","rating":null,"cityCode":null,"holidayId":27874},{"hotelId":26362,"hotelCode":null,"hotelName":"Friday Attitude Hotel","rating":null,"cityCode":null,"holidayId":27873},{"hotelId":26965,"hotelCode":null,"hotelName":"Heritage Awali","rating":null,"cityCode":null,"holidayId":27934},{"hotelId":26963,"hotelCode":null,"hotelName":"Heritage le Telfair","rating":null,"cityCode":null,"holidayId":27931},{"hotelId":26306,"hotelCode":null,"hotelName":"Hotel Angsana Balaclava Mauritius","rating":null,"cityCode":null,"holidayId":27971},{"hotelId":26046,"hotelCode":null,"hotelName":"Hotel Sofitel So Mauritius","rating":null,"cityCode":null,"holidayId":27752},{"hotelId":26301,"hotelCode":null,"hotelName":"Long Beach Resort","rating":null,"cityCode":null,"holidayId":27753},{"hotelId":26763,"hotelCode":null,"hotelName":"LUX* Belle Mare","rating":null,"cityCode":null,"holidayId":27914},{"hotelId":26762,"hotelCode":null,"hotelName":"LUX* Grand Gaube","rating":null,"cityCode":null,"holidayId":27913},{"hotelId":26761,"hotelCode":null,"hotelName":"LUX* Le Morne","rating":null,"cityCode":null,"holidayId":27892},{"hotelId":26721,"hotelCode":null,"hotelName":"Maradiva Villas Resort & Spa","rating":null,"cityCode":null,"holidayId":27891},{"hotelId":26330,"hotelCode":null,"hotelName":"Mont Choisy Beach Villas","rating":null,"cityCode":null,"holidayId":27932},{"hotelId":26331,"hotelCode":null,"hotelName":"Mystik Apart Hotel","rating":null,"cityCode":null,"holidayId":27933},{"hotelId":26048,"hotelCode":null,"hotelName":"One and Only Le Saint Geran","rating":null,"cityCode":null,"holidayId":27791},{"hotelId":26328,"hotelCode":null,"hotelName":"Preskil Beach Resort","rating":null,"cityCode":null,"holidayId":27771},{"hotelId":26361,"hotelCode":null,"hotelName":"Recif Attitude Hotel","rating":null,"cityCode":null,"holidayId":27872},{"hotelId":26329,"hotelCode":null,"hotelName":"Solana Beach Resort","rating":null,"cityCode":null,"holidayId":27792},{"hotelId":26743,"hotelCode":null,"hotelName":"Tamassa All-Inclusive Resort","rating":null,"cityCode":null,"holidayId":27893},{"hotelId":26541,"hotelCode":null,"hotelName":"The Ravenala Attitude Hotel","rating":null,"cityCode":null,"holidayId":27871},{"hotelId":26821,"hotelCode":null,"hotelName":"The Saint Regis Mauritius Resort","rating":null,"cityCode":null,"holidayId":27936},{"hotelId":26053,"hotelCode":null,"hotelName":"The Sands Suites Resort and Spa","rating":null,"cityCode":null,"holidayId":27772},{"hotelId":26822,"hotelCode":null,"hotelName":"The Westin Turtle Bay Resort & Spa","rating":null,"cityCode":null,"holidayId":27935},{"hotelId":26764,"hotelCode":null,"hotelName":"Villas de LUX* Belle Mare","rating":null,"cityCode":null,"holidayId":27912},{"hotelId":26363,"hotelCode":null,"hotelName":"Zilwa Attitude Hotel","rating":null,"cityCode":null,"holidayId":27875}]
谢谢
答案 0 :(得分：2)
要在页面加载期间显示图表，您应该预先填充图表所需的值 之后，运行渲染图表的功能。
此致 Malikai
代码：
$scope.initModal = function () {
console.log('initModal');
$scope.changeSchemaType();
$scope.getHotelDataByDestination();
preselectChartValues();
updateCharts();
};
function preselectChartValues() {
$scope.hotel = {}; // some hotel
$scope.roomType = {} // some room type
// ...
}
function updateCharts() {
$scope.displayTableView(
$scope.hotel.hotelId,
$scope.roomType.roomTypeName,
$scope.departureDate,
$scope.nights,
$scope.mealPlan.code);
$scope.initCompetitorPriceChart(
$scope.hotel.hotelId,
$scope.departureDate,
$scope.nights,
$scope.mealPlan.code);
}