我创建了两个下拉菜单营业时间&在angularJS中使用ng-options 关闭时间。下拉选项由相同的数组$scope.availableTimes
以下是HTML代码:
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="exampleFormControlSelect1">Opening </label>
<select class="form-control" data-ng-options="time.display for time in availableTimes" data-ng-model="selectedFromTime">
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleFormControlSelect1">Closing</label>
<select class="form-control" data-ng-options="time.display for time in availableTimes" data-ng-model="selectedToTime">
</select>
</div>
</div>
</div>
以下是AngularJS脚本
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.availableTimes = [];
$scope.availableTimes.push({
'msValue': 0,
'display': '12:00 Morning'
});
for (var msValue = 900000; msValue <= 85500000; msValue += 900000) { // 90.000ms = 15 min, 85.500.000ms = 11:45PM
$scope.availableTimes.push({
'msValue': msValue,
'display': moment(msValue).utc().format("h:mm A")
})
}
var dayMS = 86400000 - 1;
$scope.availableTimes.push({
'msValue': dayMS,
'display': '12:00 Midnight'
});
console.log($scope.availableTimes);
});
正如你所看到的,这两个下拉列表的时间列表从午夜12点到凌晨12点开始,间隔15分钟。
喜欢这样:
凌晨12:00
上午12:15
上午12:30
上午12:45
.....
.....
晚上11点45分
午夜12:00
What I can do to make the Closing Hour drop-down options lists starts with the value that is 15 min greater than Opening hours.
示例:
如果开放时间选择为上午8:00截止时间下拉列表将从上午8:15而不是上午12:00开始。
营业时间
12:00上午
....
....
上午8:00(选定)
上午8:15
上午8:30
....
午夜12:00
关闭时间
上午8:00
上午8:15
上午8:30
.......
.......
午夜时分
上午12:15
上午12:30
.......
.......
上午7:45
我希望这个例子能说明我想要实现的目标。任何帮助将不胜感激。
答案 0 :(得分:2)
我已更新您的代码。
使用此文件:
app.js
Books::where('book_title ','LIKE','%'.$something.'%')
->orWhere('book_author ','LIKE','%'.$something.'%')
->orWhere('book_description ','LIKE','%'.$something.'%')->get();
的index.html
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.availableTimes = [];
$scope.selectedFromTime = {
'msValue': 0,
'display': '12:00 Morning'
};
$scope.availableTimes.push($scope.selectedFromTime);
for (var msValue = 900000; msValue <= 85500000; msValue += 900000) { // 90.000ms = 15 min, 85.500.000ms = 11:45PM
$scope.availableTimes.push({
'msValue': msValue,
'display': moment(msValue).utc().format("h:mm A")
})
}
var dayMS = 86400000 - 1;
$scope.availableTimes.push({
'msValue': dayMS,
'display': '12:00 Midnight'
});
$scope.skipValues = function(value, index, array) {
return value.msValue > $scope.selectedFromTime.msValue ;
};
console.log($scope.availableTimes);
});
答案 1 :(得分:1)
请检查链接:https://plnkr.co/edit/I5R8NvdVHZk2t4dQMvyr?p=preview
我已更新您的代码
<head lang="en">
<meta charset="utf-8" />
<title>Custom Plunker</title>
<script data-require="moment.js@*" data-semver="2.14.1" src="https://npmcdn.com/moment@2.14.1"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="pagination.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="exampleFormControlSelect1">Opening Hours</label>
<select class="form-control" data-ng-options="time.display for time in availableTimes" data-ng-model="selectedFromTime" ng-change="automaticallySelectClosingTime(selectedFromTime.msValue)">
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleFormControlSelect1">Closing Hours</label>
<select class="form-control" data-ng-options="time.display for time in closingTimes" data-ng-model="selectedToTime">
</select>
</div>
</div>
</div>
</body>
</html>
index.html
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.availableTimes = [];
$scope.closingTimes = [];
$scope.availableTimes.push({
'msValue': 0,
'display': '12:00 Morning'
});
for (var msValue = 900000; msValue <= 85500000; msValue += 900000) { // 90.000ms = 15 min, 85.500.000ms = 11:45PM
$scope.availableTimes.push({
'msValue': msValue,
'display': moment(msValue).utc().format("h:mm A")
})
}
var dayMS = 86400000 - 1;
$scope.availableTimes.push({
'msValue': dayMS,
'display': '12:00 Midnight'
});
$scope.closingTimes = $scope.availableTimes;
console.log($scope.availableTimes);
$scope.automaticallySelectClosingTime = function(msValue) {
$scope.closingTimes = $scope.availableTimes;
var remainingTimings = [];
var index = $scope.closingTimes.map(function(obj){return obj.msValue;}).indexOf(msValue);
index = (index === $scope.availableTimes.length-1) ? 1 : index+1;
$scope.closingTimes = $scope.closingTimes.slice(index,$scope.availableTimes.length);
if(msValue !== dayMS) {
remainingTimings = $scope.availableTimes.slice(1,index -1);
}
$scope.closingTimes = $scope.closingTimes.concat(remainingTimings);
$scope.selectedToTime = $scope.closingTimes[0];
}
});