Reputation: 123
Service:
$scope.setTimeSlots = function(interval, field) {
var startingTime = moment().hours(8).minutes(0);
field.timeslots = [];
for (var i = 0; i < interval; i++) {
$scope.intervals = 60;
field.timeslots.push(startingTime.add($scope.intervals, 'minute').format("h:mm"));
}
}
$scope.Savesettings = function(companyName, form_settings) {
var _settings = {
'name': companyName
};
console.log(_settings);
debugger;
var WorkDays = [];
for (var i = 0; i < $scope.fields.length; i++) {
var item = $scope.fields[i];
var time = $scope.fields.timeslots;
if (item.checked) {
WorkDays.push(item.name, time.timeslot);
}
console.log(time);
}
I have displayed each day in a row and each day has a drop-down and a textbox.
I'm trying to display the selected check-box values along with their respective values in the text-box and drop-down, so that it is displayed in JSON format {'day':Monday,'duration':3,'drop-down':10.00}
.
But when I try to display the selected days and its duration and timeslot it is not displayed.How to display the JSON correctly.
Upvotes: 0
Views: 76
Reputation: 4819
Check this snippet.
The changes are:
setSelectedSlot
that stores the selected slot for each field
object.change
event of the select
.field
object when setTimeSlots
is called.var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.fields = [{ id: 1, name: 'Sunday', timeslots: [] },
{ id: 2, name: 'Monday' },
{ id: 3, name: 'Tuesday' },
{ id: 4, name: 'Wednesday' },
{ id: 5, name: 'Thursday' },
{ id: 5, name: 'Friday' }];
$scope.setTimeSlots = function (interval, field) {
var startingTime = moment().hours(8).minutes(0);
field.timeslots = [];
// This was added
field.duration = interval;
// end of changes
for(var i=0; i < interval; i++){
$scope.intervals=60;
field.timeslots.push(startingTime.add($scope.intervals,'minute').format("h:mm"));
}
}
// This function is new
$scope.setSelectedSlot = function(field) {
field.selectedSlot = this.time;
}
// end of changes
$scope.Savesettings=function(){
$scope.workDays=[];
for(var i=0; i<$scope.fields.length;i++){
var item = $scope.fields[i];
if(item.checked){
// The following line changed
$scope.workDays.push({"day": item.name, "drop-down": item.selectedSlot, "duration": item.duration});
// end of changes
}
}
console.log($scope.workDays);
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<script src="app.js"></script>
</head>
Result => {{workDays}}
<body ng-controller="MainCtrl">
<table>
<tr ng-repeat="field in fields" name="slotSelection">
<td align="center">
<input type="checkbox" ng-model="field.checked">{{field.name}}
</td>
<td>
<!-- Bind a new function to the `change` event -->
<select ng-model="time" ng-options="time for time in field.timeslots" ng-change="setSelectedSlot(field)">
<!-- end of changes -->
<option value="">select</option>
</select>
</td>
<td>
<input type="text" ng-model="interval" ng-blur="setTimeSlots(interval, field)">
</td>
</tr>
</table>
<button ng-click="Savesettings()">Submit</button>
</body>
</html>
Upvotes: 1
Reputation: 9804
There are few issues
1: WorkDays is not defined. 2: field does not have time and interval properties associated with it
You can try the below changes
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.fields = [{ id: 1, name: 'Sunday', timeslots: [] },
{ id: 2, name: 'Monday' },
{ id: 3, name: 'Tuesday' },
{ id: 4, name: 'Wednesday' },
{ id: 5, name: 'Thursday' },
{ id: 5, name: 'Friday' }];
$scope.setTimeSlots = function (interval, field) {
var startingTime = moment().hours(8).minutes(0);
field.timeslots = [];
for(var i=0; i < interval; i++){
$scope.intervals=60;
field.timeslots.push(startingTime.add($scope.intervals,'minute').format("h:mm"));
}
}
$scope.Savesettings=function(){
$scope.workDays=[];
for(var i=0; i<$scope.fields.length;i++){
var item = $scope.fields[i];
if(item.checked){
var obj = {"day":item.name,"duration":item.interval,"drop-down": item.time,}
$scope.workDays.push(obj);
}
}
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table>
<tr ng-repeat="field in fields" name="slotSelection">
<td align="center">
<input type="checkbox" ng-model="field.checked">{{field.name}}
</td>
<td>
<select ng-model="field.time" ng-options="time for time in field.timeslots">
<option value="">select</option>
</select>
</td>
<td>
<input type="text" ng-model="field.interval" ng-blur="setTimeSlots(field.interval, field)">
</td>
</tr>
</table>
<button ng-click="Savesettings()">Submit</button>
{{workDays}}
</body>
</html>
Upvotes: 0