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

【问题标题】：Adding a JSON object using ng-submit + ng-model使用 ng-submit + ng-model 添加 JSON 对象
【发布时间】：2014-01-05 03:24:21
【问题描述】：

如何使用 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;
});

与控制器链接： 我如何编写一个正确的方法来将输入推送到 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>

【问题讨论】：

标签： javascript json angularjs angularjs-directive yeoman

【解决方案1】：

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

您需要从表单发送一些数据，所以我在 HTML 标记中为您的表单元素绑定了模型：

<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。绑定顶级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

【讨论】：

【解决方案2】：

首先，将每个表单字段绑定到您的范围：

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

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

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

然后，为细节对象添加一个新的哈希值：

$scope.addAirport = function() {
    $scope.airports.detail[$scope.code] = {
        code: $scope.code,
        name: $scope.name,
        city: $scope.city
    }
});

一些基本的验证是合适的，这样现有的“id”就不会被覆盖。

【讨论】：