Hi I am using following code which using repeate populates the fields inside each set there is a button that adds dynamically another set of fields in that particular set.
<body ng-controller="MainCtrl">
<div ng-repeat="option in question.options">
<label>{{$index+1}}</label>
<input type="text" ng-model="option.number" ng-change="change()" />
<input type="text" ng-model="option.description" ng-change="change()" />
<br/>
<div>
<label>{{question.options.length + 1}}</label>
<input type="text" ng-model="question.option_new.number" />
<input type="text" ng-model="question.option_new.description" />
<button type="button" ng-click="add()">Add Row</button>
<br/>
</div>
</div>
and angular code:
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
// You'd likely be getting this from a service, but I'm hard-coding here.
$scope.question = {
options: [
{ number: 1, description: 'I am option one.' },
{ number: 2, description: 'I am option two' },
{ number: 3, description: 'You get the idea.'}
],
option_new: { number: '', description: '' }
};
$scope.add = function() {
// add the new option to the model
$scope.question.options.push($scope.question.option_new);
// clear the option.
$scope.question.option_new = { number: '', description: '' };
}
});
Code works fine, but the problem is when I type in one field same gets typed in all the fields that were added in different records i guess data is binded. How can i change this so when i fill out a field that was added it only binds to that one not all of them. Thanks
