Question

在下表中我有两个小问题！

首先：

添加和删除旅行工作正常。也许有人可以给我一个提示如何从子阵列中删除我的条目 - 在旅途中的DAYS？

第二

当我创建新旅行时，我无法在其中创建新的DAYS。我认为这是因为在添加新旅程时没有创建缺少的数组DAYS。我搜索了几个小时，但我找不到工作的解决方案！

对不起，我对这个东西不熟悉......

这是我的代码和plunker网址

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

});

})();

Answer 1

怎么样：

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

如何从子阵列中删除数据？

1 个答案: