angularjs dynamic form field inside ng-repeat

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>&nbsp;</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

ruud · Accepted Answer · 2016-08-31 11:52:20Z

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);
}

answered Aug 31, 2016 at 11:52

ruud

2104 silver badges15 bronze badges

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

1 Comment

sanu Over a year ago

can you provide me any link please

Sruthi Poddutur · Accepted Answer · 2017-08-10 14:32:43Z

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>

Collectives™ on Stack Overflow

angularjs dynamic form field inside ng-repeat

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related