2015-02-27 4 views
0

Я новичок в угловой и нуждаюсь в помощи! Загрузка данных из моего .json файла отлично работает, а также предварительный просмотр формы.AngularJS - Добавление данных не работает

Но теперь я не могу представить свои данные формы! Я думаю, что это как-то связано с индексом массива DAYS?

На самом деле я не могу это исправить! Submit должен добавить новый объект в 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> 

короткий .json экстракт

[ 
    { 
     "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" 
      } 
     } 
    } 
] 

Здесь вы можете увидеть, что я имею в виду:

http://plnkr.co/edit/mWkE2aH1X3UcZp2ehIuT?p=preview

ответ

0

Ваш файл данных содержит DAYS как объект не как массив, поэтому он не имеет метода «push».

[ 
    { 
     "Startdate": "Jan02", 
     "DAYS": [ 
        { 
         "DATE": "Jan02", 
         "IATA": "TXL", 
         "DUTY": "6:10" 
        } 
      ] 

    } 
] 

Я изменил ваш код плунжера и заменил DAYS на массив. Теперь, похоже, он работает и успешно добавляет даты в текущую поездку. Вот ссылка: http://plnkr.co/edit/75VhFpbSWTpFWjcGe0U8?p=info

+0

Спасибо, что это то, что я думал! Мой .json-файл создается из скрипта php, который является циклом! Поэтому я не знаю, как изменить его, чтобы получить массив! $ trip [$ i] ["DAYS"] [$ b] = array(); Если я удалю свой индекс $ b, он должен дать мне то, что вы написали, но тогда я не могу получить правильный вывод цикла! –

+0

Я изменил свой скрипт, чтобы начать мой индекс с DAYS с 0 вместо 1, и теперь json_encode генерирует именно тот формат, который вы мне сказали! еще раз спасибо –

0

Вы данные, как предполагается, будет так, U не может нажать на объект

[ 
    { 
     "Startdate": "Jan02", 
     "DAYS": [ 
        { 
         "DATE": "Jan02", 
         "IATA": "TXL", 
         "DUTY": "6:10" 
        } 
      ] 

    } 
] 
Смежные вопросы