CODEWITHSUNDEEP
javascriptarraysangularjs
phil-k
phil-k

Reputation: 67

How to delete Data from subarray?

Within the following table I have a two small problems!

First:

Adding and deleting trips works fine. Maybe someone can give me a hint how to delete my entries from subarray - DAYS within a trip?

Second:

When I create a new trip, I am not able to create new DAYS within. I think this is because of the missing array DAYS which is not created when adding a new trip. I have searched for hours but I was not able to find a working solution !

Sorry I am new to this stuff...

Here's 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 = {};
  }

});

})();

Upvotes: 1

Views: 113

Answers (1)

jlowcs
jlowcs

Reputation: 1933

How about:

1)

$scope.delTripDay = function(trip, index) {
    trip.DAYS.splice(index, 1);
}

<a ng-click="delTripDay(trip, $index)">DEL</a>

2)

$scope.trips.push({'Startdate':$scope.newtrip, DAYS: []})

Working Plunkr

Upvotes: 1

Related Questions