Using ng-submit and ng-model with Nested javascript objects

Question

LIVE CODE JSBIN

I have a form, and a set of data named Templates.row. I want to use the form to push user inputed data not to Templates.row but an inner object Templates.row.touts.

So two problems: I can make the form submit to templates.row{} using my addTout() function:

.controller("templatesCtrl", function ($scope, Templates) {

    $scope.template = Templates;

    $scope.addTout = function() {
      $scope.template.row[$scope.ap.id] = $scope.ap;
      delete($scope.ap);
    };
});

but I would like it to create inside templates.row.touts:

angApp.factory("Templates", function () {
    var Templates = {};
    Templates.row = {
        touts : [
            {
                'slug' : 'slug1',
                'classes' : ['col-12', 'col-md-3', 'col-lg-3' ],
                'staticImg' : 'images/guy-1.3.jpg',
                'caption' : 'LIGHTWEIGHT STYLE',
                'subCaption' : 'Shop Nike Tech Pack'
            },
            {
                'slug' : 'slug2',
                'classes' : ['col-12', 'col-md-9n', 'col-lg-9n' ],
                'staticImg' : 'images/shoe-sing.jpeg',
                'caption' : 'THE NIKE KNOWS COLLECTION. AVAILABLE NOW.',
                'subCaption' : 'Kicks of the Week: Explore the complete Nike Knows Collection'
            }
        ]
  };
    return Templates;
});

As you can see it gets set outside of touts (and as undefined which I dont know why/what that means) wrong place Unfortunatly when I change my addTout() function to:

    $scope.addTout = function() {
      $scope.template.row.touts[$scope.ap.id] = $scope.ap;
      delete($scope.ap);
    };

It doesn't work. So how do I change my addTout() to beable to push and create a new set of data inside touts array.

The next problem will be that the key: classes has is an array. How would I support this array in the form so it properly stores.

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

       <div class="form-group ">
         <label >classes:</label><br>
        <input class="form-control" type="text" ng-model="ap.classes" placeholder="e.g. col-12">
          <input class="form-control" type="text" ng-model="ap.classes" placeholder="e.g. col-md-12">
          <input class="form-control" type="text" ng-model="ap.classes" placeholder="e.g. col-lg-12">
      </div>

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

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

      <div class="form-group">
        <label>Sub Caption</label><br>
        <input  class="form-control"type="text" ng-model="ap.subcaption" placeholder="eg. Portland">
      </div>

  <input class="btn btn-primary" type="submit">
    </form>

scarlz · Accepted Answer · 2014-02-03 03:19:42Z

1

As the touts are an array, you should assign your new entry using:

$scope.template.row.touts.push($scope.ap);

This will add it as a new tout correctly. The reason you were receiving an undefined key is $scope.ap.id doesn't seem to have been assigned anywhere, that I can see.

answered Feb 3, 2014 at 3:19

scarlz

2,5121 gold badge19 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using ng-submit and ng-model with Nested javascript objects

LIVE CODE JSBIN

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related