There are a couple of issues within the table that I'm working on!
First:
Adding and deleting trips is functioning well. However, I am facing a challenge in deleting entries from the subarray - DAYS within a trip. Any tips or hints on how to accomplish this would be greatly appreciated!
Second:
When creating a new trip, I encounter difficulties in adding new DAYS within it. This is possibly due to the absence of an array called DAYS which is not created when adding a new trip. Despite hours of searching, I have been unable to find a solution that works!
Apologies for my lack of expertise...
Below you'll find my code and Plunker URL
http://plnkr.co/edit/MRAhLk7NxZHx4mTLaYxt?p=preview
index.html
<body ng-controller="TripController">
<div class="row" style="margin-top: 50px;">
<div class="col-md-10 col-md-offset-1">
<form name="addTrip" ng-submit="addTrip()">
<input ng-model="newtrip" type="text" name="newtrip" placeholder="YYYY-MM-DD" required />
<button ng-disabled="addTrip.$invalid">Add Trip</button>
</form>
<div class="alert alert-info" role="alert" ng-repeat="trip in trips">
<h5>Startdatum: {{trip.Startdate | date:'dd.MM.yyyy'}} <a class="pull-right" ng-click="deleteTrip($index)">x</a></h5>
<table class="table">
<tr>
<th><a href="" ng-click="predicate = 'DATE'; reverse=reverse">DATE</a>
</th>
<th></th>
<th></th>
</tr>
<tr ng-repeat="day in trip.DAYS | orderBy:predicate:!reverse" style="background-color: #CCC;">
<td width="25%;">{{day.DATE | date:'dd.MM.yyyy'}}</td>
<td width="25%;">
<input ng-model="day.IATA" />
</td>
<td width="25%;">
<input ng-model="day.DUTY" />
</td>
<td width="25%;">
<a ng-click="deleteDay()"></a>
</td>
</tr>
</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 | date:'dd.MM.yyyy'}}</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>
<div class="row">
<div class="col-xs-3 col-md-3">
<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-primary">Add</button>
</div>
</div>
</form>
</div>
</div>
</div>
{{trips}}
</body>
script.js
(function() {
var app = angular.module('showTrips', []);
app.controller('TripController', ['$scope', '$http', function ($scope, $http){
$http.get('trips.json').success(function(data) {
$scope.trips = data;
$scope.addTrip = function(){
$scope.trips.push({'Startdate':$scope.newtrip})
$scope.newtrip = ''
}
$scope.deleteTrip = function(index){
$scope.trips.splice(index, 1);
}
});
}]);
app.controller("DayController", function(){
this.day = {};
this.addDay = function(trip)
{
trip.DAYS.push(this.day);
this.day = {};
}
});
})();