2016-10-27 47 views
0

我一直在嘗試爲我的Ionic應用程序創建一個下拉列表,用戶可以選擇不同的時間預訂預約。我設置它,以便選擇的小時數將是一個值。但是,到目前爲止,我一直無法實現它的工作。當我嘗試數據綁定或查看控制檯中的值時,不會顯示任何內容。輸入小時數 - Ionic App

這裏是我到目前爲止的代碼段:

<select> 
     <option ng-model="bookingInfo.hour" type="time" value="08:00"> 8:00am</option> 
     <option ng-model="bookingInfo.hour" type="time" value="09:00"> 9:00am</option> 
    </select> 
    </label> 

我希望被指出了正確的方向。

謝謝。

回答

0

爲了顯示預訂時間列表,您可以在控制器內創建一個數組,並使用ng-repeat來遍歷它們。

然後,您的<select>將有一個ng-model綁定選定的值。

下面是一個工作示例!

angular.module("app", []) 
 
.controller("myCtrl", function($scope) { 
 
    $scope.bookingInfo = [ 
 
    {"hour": "8:00AM"}, 
 
    {"hour": "9:00AM"}, 
 
    {"hour": "10:00AM"}, 
 
    {"hour": "11:00AM"} 
 
    ] 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="app" ng-controller="myCtrl"> 
 
    <select ng-model="selectedBooking" name="bookingInfo"> 
 
    <option value="" disabled selected>Select your booking time</option> 
 
    <option value="{{info.hour}}" ng-repeat="info in bookingInfo" type="time">{{info.hour}}</option> 
 
    </select> 
 
    <div style="margin-top:20px">Selected time: {{selectedBooking ? selectedBooking : 'none'}}</div> 
 
</body>