angularjs dynamic form field inside ng-repeat - angularjs

Question

Hi I have problem in adding form field and binding inside the ng-repeat
my form is like this
<div ng-repeat="(key, value) in categories">
<div class="col-sm-12"><b>{{ value.name }}</b></div>
<div class="col-sm-12" >
<div class="col-sm-3">
<label>Product</label>
<input
type="text"
class="form-control input-sm"
ng-model="product.name">
</div>
<div class="col-sm-1">
<label> </label>
<button type="button" ng-hide="$first" ng-click="removeProduct()">-</button>
</div>
</div>
<div class="col-sm-1">
<button type="button" ng-click="addNewProduct()">+</button>
</div>
</div>
json categories
[{"id":1,"name":"Furniture & Fixture"},
{"id":2,"name":"Miscellaneous Property"},
{"id":3,"name":"Office Equipment"},
{"id":4,"name":"Renovation"},
{"id":5,"name":"Vehicle"}]
Here I want to add dynamic form fields(products) for each category
my js is like this
$scope.addNewProduct = function(){
$scope.categories.push({});
}
$scope.removeProduct= function(index){
$scope.categories.splice(index,1);
}
i know its won't work i need to push data to each category.please help

Answer 1

Your function for adding new category should look like this:
$scope.addNewProduct = function(){
var newCategory=
{
id:$scope.categories.length+1,
name:$scope.product.name
}
$scope.categories.push(newCategory);
}

Answer 2

Following code will demo how to append 'item' to items list:
<script>
angular.module('AddItemToList', [])
.controller('FormController', ['$scope', function($scope) {
$scope.item = '';
$scope.items = [];
$scope.submit = function() {
if (typeof($scope.item) != "undefined" && $scope.item != "") {
// append item to items and reset item
$scope.items.push($scope.item);
$scope.item = '';
}
};
}]);
</script>
<form ng-submit="submit()" ng-controller="FormController">
Input item and Submit the form. This will get appended to the list:
<input type="text" ng-model="input" name="item" />
<input type="submit" id="submit" value="Submit" />
<pre>Final List={{items}}</pre>
</form>