AngularJS：在页面初始加载时设置默认输入值

时间：2016-06-30 06:32:55

标签： javascript jquery html angularjs twitter-bootstrap

我正在开发一个使用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">&times;</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}]

谢谢

1 个答案:

答案 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);
}
相关问题
最新问题