个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-27 23:26:52 25 4
gpt4 key购买 nike

我正在使用 AngularJS 和 Bootstrap 开发网络应用程序。在我的应用程序中，主仪表板上有一个 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 函数并填充模式中的所有下拉字段。但实际上我得到一个空白页面，我切换模式我可以选择字段并单击提交按钮，然后绘制图表。最初它不绘制任何图形或网格。我真正想要的是显示带有图表的主页，这些图表应该为默认输入字段绘制(当模式加载默认值时，默认值是下拉列表中的第一个元素)。同样，一旦我从模式中选择新值并提交，它应该使用基于新选择值的新图表重新加载主页。

希望您清楚我在说什么。任何建议将不胜感激。

已更新

这是

之后的响应 
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}]

谢谢

最佳答案

要在页面加载期间显示图表，您应该预填充图表所需的值。
之后，运行渲染图表的函数。

问候，马利凯

代码:

$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);
}

关于javascript - AngularJS:在页面初始加载时设置默认输入值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38115526/

25 4 0
文章推荐： javascript - 在 javascript 中通过 arraylist 更改 css 值
文章推荐： javascript - IE11 安全错误中的 Canvas toDataURL
文章推荐： c++ - 错误 : insertor is not a member of std
文章推荐： javascript - 选中其他复选框时取消选中复选框
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com