顯示JSON

服務：顯示JSON

$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

我也顯示，每天一列，每一天都有一個下拉列表和一個文本框。我試圖在文本框和下拉列表中顯示選定的複選框值以及它們各自的值，以便它以JSON格式{'day':Monday,'duration':3,'drop-down':10.00}顯示。但是，當我嘗試顯示選定日期及其持續時間和時間段時，它不顯示。如何正確顯示JSON。

來源

2017-01-10 Rudhra

http://plnkr.co/edit/NnObcYUiPsFkL2qk0CaA?p=preview這是你的要求？ –

yes @SaEChowdary – Rudhra

然後檢查這個http://plnkr.co/edit/NnObcYUiPsFkL2qk0CaA?p=preview –

檢查這個片段。

的變化是：

創建一個函數setSelectedSlot存儲爲每一field對象選定的插槽。
將上一個函數綁定到select的change事件。當調用setTimeSlots時，
也將持續時間（間隔）存儲到field對象中。

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="[email protected]" 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>

來源

2017-01-10 11:33:49

'field.selectedSlot = this.time;'讀取選定的時間，但它沒有在控制檯顯示時間 – Rudhra

它顯示'[{「day」：「星期日」，「下拉」：「9:00」，「duration」：「3」}]'對我來說，不是你預期？ –

有幾個問題

1：工作日未定義。 2：現場沒有時間和與之相關聯的間隔屬性

你可以試試下面的改變

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="[email protected]" 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>

來源

2017-01-10 11:23:49 Deep

回答

相關問題