Reputation: 18831
I've created a jsFiddle: check it out
Currently, when creating the scopes they are not isolated. Therefore, if i create two input fields and type in one of them the text is duplicated in the secondary inputfield.
How can I create multiple inputs, fill them out individually and submit them all at the same time?
html
<div ng-app="miniapp" ng-controller="MainCtrl">
<a href="" data-clicker>add inputs</a>
<form ng-model="project" ng-submit="addPage()">
<div class="sections"></div>
<input type="submit" value="submit"/>
</form>
<hr>
<hr>
<p>project: {{project.name | json}}</p>
<p>output: {{output | json}}</p>
</div>
JS
var $scope;
var app = angular.module('miniapp', []);
app.directive('clicker', function($compile) {
'use strict';
return {
compile: function(tElement, tAttrs) {
//var t = '<div data-pop>Pop</div>';
var t = '<div><input type="text" ng-model="project.name"></div>';
return function(scope, iElement) {
iElement.click(function() {
$('.sections').append($compile(t)(scope));
});
};
}
}
});
app.controller('MainCtrl', function($scope) {
$scope.project = {"name":"sup"};
$scope.output = [];
$scope.addPage = function() {
$scope.output.push(_.clone($scope.project));
};
});
I feel like I've tried everything... Is it just a flaw in my logic? If so, can you show me an example that works according to the user flow below?
User Flow
Upvotes: 3
Views: 168
Reputation: 44
You should use Angular's ng-repeat directive to iterate through an array of objects and generate the input fields with data-binding.
Here is a simplified version of your code using the directive: http://jsfiddle.net/89AYX/42/
With ng-repeat, everything within the block becomes a template that get compiled automatically for each iteration of an array model. Think of it like a for-each loop in HTML that updates itself when the array changes.
<div ng-repeat="project in projects">
<input type="text" ng-model="project.name"/>
</div>
As you can see, the project
variable becomes accessible within the block as a reference to an object in the array. You can then use that reference to create a two-way binding on the input field with a property of that particular object.
Angular comes with a lot of useful built-in directives that solves a lot of common issues involving data-binding. Be sure to check out their API reference to see what's available.
Upvotes: 2
Reputation: 311
whenever you create a new input you are attaching the same model property to it project.name
var t = '<div><input type="text" ng-model="project.name"></div>';
switch that access a different attribute for each. or make an attribute an array if you can do that
Upvotes: 0