Jquery 使用angularjs日期选择器向表中添加日期

我正在开发AngularJS站点，并使用AngularDateRangePicker处理日期。

在我的页面上，datepicker工作得很好&它使用今天的开始日期初始化，从今天开始的5天内使用enddate（当页面加载时它会这样做）

然后我从startdate迭代到enddate，将每个日期添加到关联数组中&然后尝试将该数组用于具有ng repeat的表，以便每个日期都是一个新行-但我的问题是表中没有显示任何日期，在调试过程中，我可以看到正在使用所有日期创建关联数组

理想情况下，如果我的表显示日期（并且日期格式正确），这就是它的外观——但我就是无法让表显示任何日期。

*其他问题-当我使用ng repeat显示表中的日期时，“Shift 1”下的所有“Select”框都绑定到同一个对象-我如何停止此操作？当用户选择了所有内容（即：班次1、班次2、睡眠结束）时，所有这些数据都将提交到数据库

这是我的HTML：

<div data-ng-controller="admRosController" data-ng-init="listStaff()">

    <div class="page-wrapper">
        <div class="banner notdark-translucent-bg" style="background-image:url('images/banner/admin.jpeg'); background-position: 50% 50%;">
            <div class="breadcrumb-container">
                <div class="container">
                     <ol class="breadcrumb">
                        <li class="breadcrumb-item"><i class="fa fa-home pr-2"></i><a class="link-dark" href="home">Home</a></li>
                        <li class="breadcrumb-item active">Staff Roster</li>
                    </ol>
                </div>
            </div>
    </div>

    <section class="main-container">
      <div class="container">
        <div class="row">
          <div class="main col-lg-8">
             <h1 class="page-title">Staff Roster</h1>
             <div class="separator-2"></div>
          </div>
        </div>

        <div class="row">
          <div class="main col-12">

          <form data-ng-submit="createRoster()" name="rosterForm" method="POST">
            <div class="form-row">
              <div class="form-group col-md-4">
                <label for="daterange1" class="control-label">Select Roster Dates:</label>
                <div class="input-group">
                  <div class="input-group-prepend">
                    <div class="input-group-text"><i class="fa fa-calendar-check-o"></i></div>
                  </div>
                  <input date-range-picker type="text" class="form-control form-control-sm date-picker" id="daterange1" name="daterange1" data-ng-model="rosData.date" options="{locale: {format: 'MMMM D, YYYY'}}">
                </div>
              </div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-hover" data-ng-model="roster">
                    <thead class="thead-dark">
                        <tr>
                            <th class="text-center">Date</th>
                            <th class="text-center">Shift 1</th>
                            <th class="text-center">Shift 2</th>
                            <th class="text-center">Sleep Over</th>
                        </tr>
                    </thead>
                <tbody>
                    <tr class="text-center" data-ng-repeat="x in rosCal">
                        <td>{{rosCal[x].date}}</td>
                        <td><select class="form-control form-control-sm" data-ng-model="rosData.monshift1" data-ng-options="x.id as x.name for x in obj"></select></td>
                        <td><select class="form-control form-control-sm" data-ng-model="rosData.monshift2" data-ng-options="x.id as x.name for x in obj"></select></td>
                        <td><select class="form-control form-control-sm" data-ng-model="rosData.monsleep" data-ng-options="x.id as x.name for x in obj"></select></td>
                    </tr>
                </tbody>
            </table>

        </div>
            <div class="form-group has-feedback">
              <label for="message">Roster Notes</label>
              <textarea class="form-control" rows="3" id="notes" name="notes" data-ng-model="rosData.notes" placeholder=""></textarea>
              <i class="fa fa-pencil form-control-feedback"></i>
            </div>
            <p><strong>Shift 1</strong> 8:30am - 4:30pm (8 hrs)<br>
              <strong>Shift 2</strong> 9:00am - 3:00pm (6 hrs)</p>
            <br>
            <button type="submit" class="btn btn-primary">Save Roster</button>
            <button type="reset" value="Reset" class="btn btn-secondary">Clear</button>
          </form>
        </div>
      </div>
    </div>
  </section>
</div>
</div>

员工名册
工作人员名册
选择排班日期：
日期
班次1
班次2
过夜
{{rosCal[x].date}
名册说明
1班8:30am-4:30pm（8小时）

第二班上午9:00-下午3:00（6小时）



保存花名册
清楚的

这是我的角度控制器：

var app = angular.module('myApp', ['ngRoute', 'ngStorage', 'daterangepicker'])
app.controller ("admRosController", function ($scope, $http, $location) {
        $scope.rosCal = [];
        $scope.rosData = {};
        $scope.rosData.date = {
        startDate: moment(),
        endDate: moment().add(5, "days")
        };

        $scope.listStaff = function() {
            $http.get('php/rosstaff.php')
                .then(
                    function (response) {
                        $scope.obj = response.data;
                    },
                    function (response) {
                        // error handling routine
                    }
                );
                var i = 0;
                for (thisdate = $scope.rosData.date.startDate; thisdate < $scope.rosData.date.endDate; thisdate = moment().add(i, "days"))
                {
                    $scope.rosCal.push({date: thisdate});
                    alert($scope.rosCal[i].date);
                    i++;
                }

            };

        $scope.createRoster = function() {
            //var i = 0;
            //for (thisdate = $scope.rosData.date.startDate; thisdate < $scope.rosData.date.endDate; thisdate = moment().add(i, "days"))
            //{
                //$scope.rosCal.push({date: thisdate});
                //alert($scope.rosCal[i].date);
                //i++;
            //}
        };
    });

$scope.listStaff = function() {
    $http.get('php/rosstaff.php')
        .then(
            function (response) {
                $scope.obj = response.data;
            },
            function (response) {
                // error handling routine
            }
        );
        var i = 0;
        for (thisdate = $scope.rosData.date.startDate; thisdate <= $scope.rosData.date.endDate; thisdate = moment().add(i, "days"))
        {
            $scope.rosCal.push({date: thisdate});
            i++;
        }
    $scope.rosCal.push({date: $scope.rosData.date.endDate})
    $scope.rosCalJ = JSON.parse(JSON.stringify($scope.rosCal));
};

var-app=angular.module（'myApp'，['ngRoute'，'ngStorage'，'daterangepicker']））
app.controller（“admRosController”，函数（$scope、$http、$location）{
$scope.rosCal=[]；
$scope.rosData={}；
$scope.rosData.date={
起始日期：力矩（），
endDate:moment（）.添加（5，“天”）
};
$scope.listStaff=函数（）{
$http.get（'php/rosstaff.php'）
.那么(
功能（响应）{
$scope.obj=response.data；
},
功能（响应）{
//错误处理例程
}
);
var i=0；
对于（thisdate=$scope.rosData.date.startDate；thisdate<$scope.rosData.date.endDate；thisdate=moment（）。添加（i，“天”））
{
$scope.rosCal.push（{date:thisdate}）；
警报（$scope.rosCal[i].date）；
i++；
}
};
$scope.create花名册=函数（）{
//var i=0；
//对于（thisdate=$scope.rosData.date.startDate；thisdate<$scope.rosData.date.endDate；thisdate=moment（）。添加（i，“天”））
//{
//$scope.rosCal.push（{date:thisdate}）；
//警报（$scope.rosCal[i].date）；
//i++；
//}
};
});

我解决了自己的大部分问题（但我还没有解决我的“附加问题”）； 主要问题是我没有将数组转换成JSON

HTML表格现在：

<div class="table-responsive">
    <table class="table table-striped table-hover" data-ng-model="roster">
        <thead class="thead-dark">
            <tr>
                <th class="text-center">Date</th>
                <th class="text-center">Shift 1</th>
                <th class="text-center">Shift 2</th>
                <th class="text-center">Sleep Over</th>
            </tr>
        </thead>
        <tbody>
            <tr class="text-center" data-ng-repeat="x in rosCalJ track by $index">
                <td>{{x.date | date:'EEE, MMMM dd, yyyy'}}</td>
                <td><select class="form-control form-control-sm" data-ng-model="rosData.monshift1" data-ng-options="x.id as x.name for x in obj"></select></td>
                <td><select class="form-control form-control-sm" data-ng-model="rosData.monshift2" data-ng-options="x.id as x.name for x in obj"></select></td>
                <td><select class="form-control form-control-sm" data-ng-model="rosData.monsleep" data-ng-options="x.id as x.name for x in obj"></select></td>
            </tr>
         </tbody>
    </table>

日期
班次1
班次2
过夜
{{x.date}日期：'EEE，MMMM-dd，yyyy'}

以及控制器中更改的功能：

var app = angular.module('myApp', ['ngRoute', 'ngStorage', 'daterangepicker'])
app.controller ("admRosController", function ($scope, $http, $location) {
        $scope.rosCal = [];
        $scope.rosData = {};
        $scope.rosData.date = {
        startDate: moment(),
        endDate: moment().add(5, "days")
        };

        $scope.listStaff = function() {
            $http.get('php/rosstaff.php')
                .then(
                    function (response) {
                        $scope.obj = response.data;
                    },
                    function (response) {
                        // error handling routine
                    }
                );
                var i = 0;
                for (thisdate = $scope.rosData.date.startDate; thisdate < $scope.rosData.date.endDate; thisdate = moment().add(i, "days"))
                {
                    $scope.rosCal.push({date: thisdate});
                    alert($scope.rosCal[i].date);
                    i++;
                }

            };

        $scope.createRoster = function() {
            //var i = 0;
            //for (thisdate = $scope.rosData.date.startDate; thisdate < $scope.rosData.date.endDate; thisdate = moment().add(i, "days"))
            //{
                //$scope.rosCal.push({date: thisdate});
                //alert($scope.rosCal[i].date);
                //i++;
            //}
        };
    });

$scope.listStaff = function() {
    $http.get('php/rosstaff.php')
        .then(
            function (response) {
                $scope.obj = response.data;
            },
            function (response) {
                // error handling routine
            }
        );
        var i = 0;
        for (thisdate = $scope.rosData.date.startDate; thisdate <= $scope.rosData.date.endDate; thisdate = moment().add(i, "days"))
        {
            $scope.rosCal.push({date: thisdate});
            i++;
        }
    $scope.rosCal.push({date: $scope.rosData.date.endDate})
    $scope.rosCalJ = JSON.parse(JSON.stringify($scope.rosCal));
};

$scope.listStaff=function（）{
$http.get（'php/rosstaff.php'）
.那么(
功能（响应）{
$scope.obj=response.data；
},
功能（响应）{
//错误处理例程
}
);
var i=0；
对于（thisdate=$scope.rosData.date.startDate；thisdate