Dynamically adding/creating object to array from angular view to controller using two way binding

Question

I have one controller, controller's template/view as below,

myController

angular.module('myApp', []).
controller('myController', ['$scope', function($scope) {
        $scope.myObject = {};
}]);

myView

<div class="container" ng-app="myApp">
    <form name="myForm" novalidate ng-controller="myController">
        <div class="form-group">
            <label for="firstname" class="control-label col-xs-2">Name</label>
            <div class="col-xs-10">
                <input type="text" ng-model="myObject.firstname" id="firstname">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname" class="control-label col-xs-2">LastName</label>
            <div class="col-xs-10">
                <input type="text" ng-model="myObject.lastname" id="lastname">
            </div>
        </div>
    </form>
</div>

here whenever user enters any data it gets reflected to myObject with firstname and lastname as dynamic properties for myObject. Now my new requirement is to add multiple dynamic views for firstname and lastname in the same view(For that I will be creating a directive and appending dynamically), and now I want myObject to be an array of objects like

myObjectArray = [{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"}]

and here each object should be populated through dynamically added views by user input using angular two way binding. But I am not sure how can I achieve this with angular, how to add object to array whenever there is a new directive template added to view dynamically.

stackoverflow.com/questions/15279244/…

santosh kore
– santosh kore

2015-02-20 05:43:21 +00:00
Commented Feb 20, 2015 at 5:43 — santosh kore
– santosh kore, Commented Feb 20, 2015 at 5:43

Abhinav Gujjar · Accepted Answer · 2015-02-20 11:29:11Z

24

In Angular you should avoid thinking in terms of dynamic controls.

Here is the approach

You want to list firstname, lastname objects
You want to add a new object to this list.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.items = [];

  $scope.itemsToAdd = [{
    firstName: '',
    lastName: ''
  }];

  $scope.add = function(itemToAdd) {

    var index = $scope.itemsToAdd.indexOf(itemToAdd);

    $scope.itemsToAdd.splice(index, 1);

    $scope.items.push(angular.copy(itemToAdd))
  }

  $scope.addNew = function() {

    $scope.itemsToAdd.push({
      firstName: '',
      lastName: ''
    })
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="plunker" ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>

  <div ng-repeat="item in items">
    {{item.firstName}} {{item.lastName}}
  </div>
  <div ng-repeat="itemToAdd in itemsToAdd">
    <input type="text" ng-model="itemToAdd.firstName" />
    <input type="text" ng-model="itemToAdd.lastName" />
    <button ng-click="add(itemToAdd)">Add</button>
  </div>
  <div>
    <button ng-click="addNew()">Add new</button>
  </div>
</body>

Notice these are simply talking about model. Here is a plunk

edited Feb 20, 2015 at 11:29

answered Feb 20, 2015 at 7:37

Abhinav Gujjar

2,6402 gold badges26 silver badges35 bronze badges

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

4 Comments

santosh kore Over a year ago

If I have to add/append this(Firstname/Lastname) view and push its values to object how we can do that? consider Firstname and lastname is a directive and on click of particular button I have to append more and more views and push its values to array..

santosh kore Over a year ago

I want to do something like this, jsbin.com/jeqixezuzi/1/edit?html,js,output but its not working after adding dynamic directives

Abhinav Gujjar Over a year ago

@santoshkore - I've edited my answer. Again - You should let angular bindings drive the controls rather than control them manually. This edit should solve your problem

Matheno Over a year ago

What does the ng-repeat of item in items do in this example?

Collectives™ on Stack Overflow

Dynamically adding/creating object to array from angular view to controller using two way binding

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related