Question

服务：

$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。

Answer 1

检查此代码段。

变化是：

创建一个函数setSelectedSlot，用于存储每个field对象的选定插槽。
将之前的函数绑定到change。{/ li>的select事件
还会在调用field时将持续时间（间隔）存储到setTimeSlots对象中。

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>

Answer 2

问题很少

1：未定义WorkDays。 2：字段没有与之关联的时间和间隔属性

您可以尝试以下更改

＆＃13;

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

＆＃13;

<!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>

＆＃13;

显示JSON

2 个答案: