Добавление объекта JSON с использованием ng-submit + ng-model

Как правильно добавить (толкать) объект (гнездо) в 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-модель, чтобы толкнуть объект в 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>
Источник

2 ответа

Решение

Есть несколько проблем, но самая большая проблема в том, что фабрика определяет объект, а не массив. Вот почему толчок не сработает.

Вам понадобятся данные для отправки из формы, поэтому я привязал модели для ваших элементов формы в тегах 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

Источник

Сначала свяжите каждое из полей формы со своей областью:

<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
    }
});

Некоторая базовая проверка была бы уместной, чтобы существующие идентификаторы не были переопределены.

Источник
Другие вопросы по тегам