Dynamically adding/creating object to array from angular view to controller using two way binding
angularjs, angularjs-directive, angularjs-scope, javascript
Solution
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
Problem
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.