angularjs how to push array to add dynamic form fields

Question

Hi I am new to Angularjs please help i am trying to create a dynamic form field my html is like this

<div ng-repeat="cb in categories">
  <div ng-repeat="choice in cb.choices">
    <input type="text" ng-model="choice.req_goods">
    <input type="text" ng-model="choice.qty">
    <button ng-hide="$first" ng-click="removeChoice($parent.$index,$index)">-</button>
  </div>
  <button type="button" ng-click="addNewChoice($index)">+</button>
</div>

js

$scope.categories = [
{
  "id":1,
   "name":"Furniture & Fixture",
   "choices":[
   {
      "req_goods":"table",
       "qty":"4"
    }]
 },
 {
   "id":2,
   "name":"Miscellaneous Property",
   "choices":[
   {
      "req_goods":"others",
      "qty":"6"
   }]
}];

$scope.addNewChoice = function(id){
            $scope.categories.choices[id].push({});
};

I want to add choices dynamically when user click add button. I tried above addNewChoice() function but it gives error angular.min.js:114 TypeError: Cannot read property '0' of undefined" please help i am really tense as i am trying this from yeterday. thank you

try $scope.categories[id].choices.push({ "req_goods":"", "qty":"" }); — Developer
– Developer, Commented Sep 2, 2016 at 11:34
exactly thank you can you help me removing (splice) the array please — sanu
– sanu, Commented Sep 2, 2016 at 11:40
i did it $scope.categories[parent_id].choices.splice(id,1); thank you — sanu
– sanu, Commented Sep 2, 2016 at 11:44

Ranjith Jayaram · Accepted Answer · 2016-09-02 11:36:08Z

2

Change it to

    $scope.categories[id].choices

it will correct your error

answered Sep 2, 2016 at 11:36

Ranjith Jayaram

2993 silver badges13 bronze badges

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

Comments

Forcent Vintier · Accepted Answer · 2016-09-02 11:42:16Z

1

As @Ranjith J said, you must change your code to

$scope.categories[id].choices.push({})

When you pass $index as a parameter in ng-click="addNewChoice($index)", you are referring to the categories index. So it makes sense to use your id parameter to access the right category.

See this JSFiddle for a working example.

answered Sep 2, 2016 at 11:42

Forcent Vintier

1591 silver badge7 bronze badges

Collectives™ on Stack Overflow

angularjs how to push array to add dynamic form fields

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related