AngularJS - Adding Data doesn't work
Question
I am new to angular and need some help ! Loading data from my .json file works fine and also the form preview works.
But now I am not able to submit my form data ! I think it has something to do with the index of DAYS array ?
Actually I am not able to fix it ! Submit should add a new Object in DAYS !
script.js
var app = angular.module('showTrips', []);
app.controller('TripController', ['$scope', '$http',
function(scope, http) {
http.get('trips.json').success(function(data) {
scope.trips = data;
});
}
]);
app.controller("DayController", function() {
this.day = {};
this.addDay = function(trip) {
trip.DAYS.push(this.day);
this.day = {};
};
});
index.html
<body ng-controller="TripController">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="alert alert-info" role="alert" ng-repeat="trip in trips">
<h5>Startdatum: {{trip.Startdate}}</h5>
<table class="table">
<tbody>
<tr ng-repeat="day in trip.DAYS" style="background-color: #CCC;">
<td width="33%;">{{day.DATE}}</td>
<td width="33%;">{{day.IATA}}</td>
<td width="33%;">{{day.DUTY}}</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>
<div class="row">
<div class="col-xs-3 col-md-3">
<input ng-model="dayCtrl.day.DATE" type="text" class="form-control" placeholder="DATE" title="DATE" />
</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">
<input type="submit" class="btn btn-primary" value="Add" />
</div>
</div>
</form>
</div>
</div>
</div>
</body>
short .json extract
[
{
"Startdate": "Jan02",
"DAYS": {
"1": {
"DATE": "Jan02",
"IATA": "TXL",
"DUTY": "6:10"
}
}
},
{
"Startdate": "Jan05",
"DAYS": {
"1": {
"DATE": "Jan05",
"IATA": "CBTH",
"DUTY": "8:07"
}
}
},
{
"Startdate": "Jan06",
"DAYS": {
"1": {
"DATE": "Jan06",
"IATA": "FTD",
"DUTY": "4:55"
},
"2": {
"DATE": "Jan07",
"IATA": "SCHULUNG",
"DUTY": "18:55"
}
}
},
{
"Startdate": "Jan09",
"DAYS": {
"1": {
"DATE": "Jan09",
"IATA": "AYT",
"DUTY": "9:36"
}
}
}
]
Here you can see what I mean:
2 answers
solution1
0 ACCPTED 2015-02-27 14:22:54
Your data file contains DAYS as an object not as an array, so it has no "push" method.
[
{
"Startdate": "Jan02",
"DAYS": [
{
"DATE": "Jan02",
"IATA": "TXL",
"DUTY": "6:10"
}
]
}
]
I've changed your plunker code and replaced DAYS to array. Now it seems to work and successfully adds dates to the current trip. Here is the link: http://plnkr.co/edit/75VhFpbSWTpFWjcGe0U8?p=info
solution2
0 2015-02-27 14:32:02
You data supposed to be like this, U can't push into object
[
{
"Startdate": "Jan02",
"DAYS": [
{
"DATE": "Jan02",
"IATA": "TXL",
"DUTY": "6:10"
}
]
}
]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.