Question

我是棱角分明的新手，需要一些帮助！从我的.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作为对象而非数组，因此它没有＆＃34; push＆＃34;方法。

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

    }
]

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

Answer 2

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

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

    }
]

AngularJS - 添加数据不起作用

2 个答案: