AngularJS

Question

我是 angular 的新手，需要一些帮助！从我的 .json 文件加载数据工作正常，表单预览也工作。

但是现在我无法提交我的表单数据！我认为这与 DAYS 数组的索引有关？

实际上我无法修复它！提交应在 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

Answer 1

您的数据文件包含作为对象而不是数组的 DAYS，因此它没有 "push" 方法。

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

    }
]

我已经更改了您的 plunker 代码并将 DAYS 替换为数组。现在它似乎可以工作并成功地将日期添加到当前行程中。这是link：http://plnkr.co/edit/75VhFpbSWTpFWjcGe0U8?p=info

Answer 2

你的数据应该是这样的，你不能推入对象

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

    }
]

AngularJS - 添加数据不起作用

AngularJS - Adding Data doesn't work

javascript

add

form-submit