AngularJS - 日期选择器不工作？答案

【问题标题】：AngularJS - Datepicker is not working?AngularJS - 日期选择器不工作？
【发布时间】：2015-03-09 20:29:00
【问题描述】：

任何人都可以向我解释为什么当我输入有效日期 (YYYY-MM-DD) 时我的按钮 Add Trip 1 有效，但是如果我使用调用完全相同的函数的按钮 Add Trip 2 则不会提交日期值！函数创建一个空对象？ “Startdatum”即使没有创建也是空的......

在我看来，两者应该完全一样！我的错在哪里？

谢谢

Plnkr

index.html

 <body ng-controller="TripController">
    <div class="row" style="margin-top: 50px;">
      <div class="col-md-10 col-md-offset-1">
        <div class="row">
          <div class="col-xs-6 col-md-6">
            <form name="addTrip" ng-submit="addTrip()">
              <input ng-model="newTrip" type="text" name="newTrip" required="" placeholder="YYYY-MM-DD" />
              <button ng-disabled="addTrip.$invalid">Add Trip 1</button>
            </form>
          </div>
          <div class="col-xs-6 col-md-6">
            <button ng-click="save()" class="btn btn-primary">Save to JSON</button>
            <h4 ng-show="savedJSON">Saved JSON</h4>
            <pre ng-show="savedJSON">{{savedJSON}}</pre>
          </div>
        </div>
        <br />
        <select ng-model="Startdate">
          <option value="" selected="selected">Alle</option>
          <option ng-repeat="option in options" value="{{option.value}}">{{option.label}}</option>
        </select>
        <br />
        <br/>
        <form name="addTrip" ng-submit="addTrip()">

        <div ng-controller="DatepickerDemoCtrl">
                  <p class="input-group">
                    <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="newTrip" is-open="opened" datepicker-options="dateOptions" date-disabled="" ng-required="true" close-text="Close" />
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-default" ng-click="open($event)">
                        <i class="glyphicon glyphicon-calendar"></i>
                      </button>
                    </span>
                  </p>
                </div>
        <button ng-disabled="addTrip.$invalid">Add Trip 2</button>
        </form>

        <br/><br/><br/><br/><br/>
        <div class="box" ng-repeat="trip in trips | filter:Startdate">
          <button type="button" ng-click="deleteTrip($index)" class="close" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
          <h5>Startdatum: {{trip.Startdate}}</h5>
          <table border="1" bordercolor="#FFF" class="table table-striped">
            <tbody>
              <tr>
                <th>
                  <i class="fa fa-calendar"></i>

 DATE</th>
                <th>
                  <i class="fa fa-plane"></i>

 IATA</th>
                <th>
                  <i class="fa fa-clock-o"></i>

 DUTY</th>
                <th>
                  <i class="fa fa-pencil-square-o pull-right"></i>
                </th>
              </tr>
              <tr ng-repeat="day in trip.DAYS | filter:query | orderBy:'DATE'" style="background-color:#A1C8F0;">
                <td width="25%;">{{day.DATE}}</td>
                <td width="25%;">
                  <input ng-model="day.IATA" />
                </td>
                <td width="25%;">
                  <input ng-model="day.DUTY" />
                </td>
                <td width="25%;">
                  <button type="button" class="btn btn-danger pull-right" aria-label="Left Align" ng-click="delTripDay(trip, $index)">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
          <form name="dayForm" ng-controller="DayController as dayCtrl" ng-submit="dayCtrl.addDay(trip)">
            <div class="row">
              <div class="col-xs-3 col-md-3">{{dayCtrl.day.DATE}}</div>
              <div class="col-xs-3 col-md-3">{{dayCtrl.day.IATA}}</div>
              <div class="col-xs-3 col-md-3">{{dayCtrl.day.DUTY}}</div>
              <div class="col-xs-3 col-md-3"></div>
            </div>
            <div class="row">
              <div class="col-xs-3 col-md-3">
                <div ng-controller="DatepickerDemoCtrl">
                  <p class="input-group">
                    <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dayCtrl.day.DATE" is-open="opened" datepicker-options="dateOptions" date-disabled="" ng-required="true" close-text="Close" />
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-default" ng-click="open($event)">
                        <i class="glyphicon glyphicon-calendar"></i>
                      </button>
                    </span>
                  </p>
                </div>
                <input ng-model="dayCtrl.day.DATE" type="text" class="form-control" placeholder="DATE (YYYY-MM-DD)" title="DATE" required="" />
              </div>
              <div class="col-xs-3 col-md-3">
                <input ng-model="dayCtrl.day.IATA" type="text" class="form-control" placeholder="IATA" title="IATA" />
              </div>
              <div class="col-xs-3 col-md-3">
                <input ng-model="dayCtrl.day.DUTY" type="text" class="form-control" placeholder="DUTY" title="DUTY" />
              </div>
              <div class="col-xs-3 col-md-3">
                <button type="submit" ng-disabled="addDay.$invalid" class="btn btn-success pull-right" aria-label="Left Align">
                  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>

script.js

(function() {
  var app = angular.module('showTrips', ['ui.bootstrap']);


  app.controller('TripController', ['$scope', '$http', '$filter',
    function($scope, $http, $filter) {
      $http.get('trips.json').success(function(data) {

        $scope.trips = data;

        var orderBy = $filter('orderBy');

        var arrayLength = $scope.trips.length;
        for (var i = 0; i < arrayLength; i++) {
          var innerLength = $scope.trips[i].DAYS.length;
          for (var j = 0; j < innerLength; j++) {
            $scope.trips[i].DAYS[j].DATE = new Date($scope.trips[i].DAYS[j].DATE);
          }
        }

        $scope.order = function(predicate, reverse) {
          $scope.trips = orderBy($scope.trips, predicate, reverse);
        };

        $scope.options = [{
          label: 'Januar',
          value: '2014-01'
        }, {
          label: 'Februar',
          value: '2014-02'
        }, {
          label: 'März',
          value: '2014-03'
        }, {
          label: 'April',
          value: '2014-04'
        }, {
          label: 'Mai',
          value: '2014-05'
        }, {
          label: 'Juni',
          value: '2014-06'
        }, {
          label: 'Juli',
          value: '2014-07'
        }, {
          label: 'August',
          value: '2014-08'
        }, {
          label: 'September',
          value: '2014-09'
        }, {
          label: 'Okotber',
          value: '2014-10'
        }, {
          label: 'November',
          value: '2014-11'
        }, {
          label: 'Dezember',
          value: '2014-12'
        }];

        $scope.addTrip = function() {
          $scope.trips.push({
            'Startdate': $scope.newTrip,
            DAYS: []
          })
          $scope.order('Startdate', false)
          $scope.newTrip = ''
        }

        $scope.deleteTrip = function(index) {
          $scope.trips.splice(index, 1);
        }

        $scope.delTripDay = function(trip, index) {
          //creating array structure like UI
          var deleteDays = $filter('orderBy')($filter('filter')(trip.DAYS, $scope.query), 'DATE');
          deleteDays.splice(index, 1); // then delete by index
          trip.DAYS = deleteDays; //reassigning update array to trip days
          $scope.trip.DAYS = $filter('orderBy')($filter('filter')(trip.DAYS, $scope.query), 'DATE');
        }

        $scope.savedJSON = '';

        $scope.save = function() {
          $scope.savedJSON = angular.toJson($scope.trips);
        };
      });


    }
  ]);


  app.controller("DayController", function($scope, $filter) {

    this.day = {};
    this.addDay = function(trip) {
      trip.DAYS.push(this.day);
      this.day = {};
      $scope.trip.DAYS = $filter('orderBy')($filter('filter')(trip.DAYS, $scope.query), 'DATE');
    }

  });




  app.controller('DatepickerDemoCtrl', function($scope) {
    $scope.today = function() {
      $scope.datum = new Date();
    };
    $scope.today();

    $scope.clear = function() {
      $scope.datum = null;
    };

    // Disable weekend selection
    $scope.disabled = function(date, mode) {
      return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
    };

    $scope.toggleMin = function() {
      $scope.minDate = $scope.minDate ? null : new Date();
    };
    $scope.toggleMin();

    $scope.open = function($event) {
      $event.preventDefault();
      $event.stopPropagation();

      $scope.opened = true;
    };

    $scope.dateOptions = {
      formatYear: 'yy',
      startingDay: 1
    };

    $scope.formats = ['yyyy-MM-dd', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    $scope.format = $scope.formats[0];
  });

})();

【问题讨论】：

我看到你的 plnkr 只包含一个添加旅行按钮，我错过了什么吗？
当我打开给定的链接时它显示两个 ...
我在顶部只有一个“添加行程”按钮，已经显示了几个行程：\
冻结已启用 - 再试一次；）

标签： angularjs forms datepicker submit

【解决方案1】：

您的第二个按钮包含在具有另一个控制器的 div 中。您的 newTrip 变量在 DatepickerDemoCtrl 控制器中更新，而不是在 TripControlle 中；我通过添加来检查

 $scope.$watch('newTrip',function(newValue, oldValue){
   console.log(newValue);
 });

作为 DatepickerDemoCtrl 的第一行。希望这有助于找到答案:-)

【讨论】：