CODEWITHSUNDEEP
javascriptangularjsjson
Rudhra
Rudhra

Reputation: 123

Displaying the JSON

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

link

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

Answers (2)

Marc Compte
Marc Compte

Reputation: 4819

Check this snippet.

The changes are:

  • create a function setSelectedSlot that stores the selected slot for each field object.
  • bind the previous function to a change event of the select.
  • also store the duration (interval) into the 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

Deep
Deep

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

Related Questions