0
может кто-нибудь объяснить мне, почему моя кнопка Add Trip 1 работает, когда я ввожу действительную дату (ГГГГ-ММ-ДД), но если я использую свою кнопку Add Trip 2, которая вызывает точно такую же функцию, значение даты не отправляется! Функция создает пустой объект? «Startdatum» пуст, даже не создан ...AngularJS - Datepicker не работает?
В моих глазах оба должны делать то же самое! Где моя ошибка?
благодаря
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 содержит только одну кнопку Add trip, я пропущу sth? –
он показывает два, когда я открываю данную ссылку ... –
Я получаю только одну кнопку «Добавить поездку» вверху, с несколькими уже показанными отключениями: \ –