javascript - 使用 ng-submit + ng-model 添加 JSON 对象

Question

如何使用 Angular 正确地将对象(嵌套)添加(推送)到 json。

<小时/>

查看现场工作演示:JSbin Link

我有一个具有特定结构的机场工厂:

angApp.factory("Airports", function () {
    var Airports = {};
    Airports.detail = {
        "PDX": {
            "code": "PDX",
            "name": "Portland International Airport",
            "city": "Portland"
        },
        "STL": {
            "code": "STL",
            "name": "Lambert-St. Louis International Airport",
            "city": "St. Louis"

        },
        "MCI": {
            "code": "MCI",
            "name": "Kansas City International Airport",
            "city": "Kansas City"

        }
    };
    return Airports;
});

与 Controller 链接: 如何编写正确的方法将输入推送到 Airport.detail？

.controller("AirportsCtrl", function ($scope, Airports) {
    $scope.formURL = "views/_form.html";
    $scope.currentAirport = null;
    $scope.airports = Airports;
    $scope.setAirport = function (code) {
    $scope.currentAirport = $scope.airports.detail[code];
    };

  $scope.addAirport = function() {
    $scope.airports.push();
  };


});

HTML: 我应该在 ng-model 中放入什么才能将对象正确插入 Airport.details 添加机场 身份证号:

       <div class="form-group">
         <label >code:</label><br>
        <input class="form-control" type="text" placeholder="eg. PDX">
      </div>

      <div class="form-group">
        <label>Name:</label><br>
        <input class="form-control" type="text" ng-model="" placeholder="eg. Portland Intl. Airport">
      </div>

      <div class="form-group">
        <label>City</label><br>
        <input  class="form-control"type="text" ng-model="" placeholder="eg. Portland">
      </div>
  <input class="btn btn-primary" type="submit">
    </form>

Answer 1

存在一些问题，但最大的障碍是工​​厂正在定义一个对象，而不是一个数组。这就是为什么推送不起作用。

您将需要从表单发送一些数据，因此我在 HTML 标记中为您的表单元素绑定(bind)了模型:

<form ng-submit="addAirport()" ng-model="ap" >
    <h4 >Add Airport</h4>
    <div class="form-group">
        <label>ID:</label><br>
        <input class="form-control" type="text" ng-model="ap.id" placeholder="eg. PDX">
    </div>

额外的表单元素被赋予了匹配的模型，ap.code、ap.name和ap.city。绑定(bind)顶级 ap 对象可以稍后保存一些代码。

addAirport 函数如下所示:

$scope.addAirport = function() {
  $scope.airports.detail[$scope.ap.id] = $scope.ap;
  delete($scope.ap);
};

这只是将 $scope.ap(表单)数据添加到您的 $scope.airports.detail 对象中。 (详细信息对象包含集合)。删除命令重置表单。

这是更新的 jsbin，现在可以添加机场:http://jsbin.com/OGipAVUF/11/edit