Add buttons dynamically which also add textboxes dynamically AngularJS

Question

I have this JSFiddle code :

<div ng-app="angularjs-starter" ng-controller="MainCtrl">
   <fieldset  data-ng-repeat="choice in choicesA">
      <input type="text" ng-model="choice.name" name="" placeholder="Enter name">
         <button class="addfields" ng-click="addNewChoice()">Add fields</button>
      <button class="remove" ng-click="removeChoice()">-</button>
   </fieldset>


   <div id="choicesDisplay">
      {{ choicesA }} <br/>
      {{ choicesB }}
   </div>
</div>

JS :

var app = angular.module('angularjs-starter', []);

  app.controller('MainCtrl', function($scope) {

  $scope.choicesA = [{id: 'choice1'}, {id: 'choice2'}];

  $scope.choicesB = [];

  $scope.addNewChoice = function() {
    var newItemNo = $scope.choicesA.length+1;
    $scope.choicesA.push({'id':'choice'+newItemNo});
  };

  $scope.removeChoice = function() {
    var lastItem = $scope.choicesA.length-1;
    $scope.choicesA.splice(lastItem);
  };

});

As you can see, I have a function addNewChoice() which adds objects to the array choicesA, and then Textboxes get added based on objects number on the choicesA array.

I need to add textboxes to the first fieldset only when I click on the Add fields button on the first fieldset, and the data that I write on those generated textboxes is binded and added to seperate objects to the choicesB array. and the same for all the other Add fields buttons (so each Add field button can only add textboxes to its own fieldset tag), which also get generated based on the number of objects in the choicesA array.

I tried everything, I just can't figure it out. I can explain more if it's a bit unclear. Thank you a ton in advance.

EDIT : Thank you all for your great help, let me explain more :

I have a Spring REST API and two Java objects (JPA entities) named Resource & Action, the object Resource contains a List of Actions, and Action contains a reference to a Resource.

When I load a page, I get an array of Resource objects that I already saved return from the database by an $http.get() method,named choicesA, the structure of array is like this :

[
{"idResource":1, "nameResource": "resName1"},
{"idResource":2, "nameResource": "resName2"}
......etc depends oh how much rows I got from the DB
]

I have another method, $http.post() which posts an array of Action objects named choicesB a seperate non nested array. The array structure is like this :

[
{"idAction":1, "nameAction":"nameAction1", "resource": 
   {"idResource":1, "nameResource": "resName1"},
{"idAction":2, "nameAction":"nameAction2", "resource": 
   {"idResource":2, "nameResource": "resName2"},
   ..
}
{...},
{...}
...
]

So the choicesA array contains the Resource objects that I got with the $http.get(), then I want to fill Action objects in the choicesB array and then save the array using $http.post(), every Action should contain a Resource object. If I click to add more actions in the first fieldset tag for example, means that I want to fill the first Action object in choicesB array, and assign to it the first Resource object located in the choicesA array etc..

I want to be able to decide the number of actions and fill them out, then saving them to the choicesB array. but every action is related to a specific Resource object like I described.

I hope it's clear now, I'm sorry & Thank you again.

@StepanKasyanenko I wanted it in a different way but your example works as well, Thank you a million ! — Dwix
– Dwix, Commented Feb 29, 2016 at 5:50

Stepan Kasyanenko · Accepted Answer · 2016-02-29 05:43:10Z

Maybe I misunderstood your question. Maybe this will help solve your problem.

Live example on jsfiddle.

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {

  $scope.choicesA = [{
    id: 'choice1',
    choicesB:[]
  }, {
    id: 'choice2',
    choicesB:[]
  }];


  $scope.addNewChoice = function() {
    var newItemNo = $scope.choicesA.length + 1;
    $scope.choicesA.push({
      'id': 'choice' + newItemNo,
      choicesB:[]
    });
  };

  $scope.removeChoice = function(ind) {
    $scope.choicesA.splice(ind,1);
  };

  $scope.addNewChoiceB = function(choice) {
    var newItemNo = choice.choicesB.length + 1;
    choice.choicesB.push({
      'id': 'choice' + newItemNo
    });
  };

  $scope.removeChoiceB = function(choice,ind) {
    choice.choicesB.splice(ind,1);
  };

});

fieldset {
  background: #FCFCFC;
  padding: 16px;
  border: 1px solid #D5D5D5;
}

.addfields {
  margin: 10px 0;
}

#choicesDisplay {
  padding: 10px;
  background: rgb(227, 250, 227);
  border: 1px solid rgb(171, 239, 171);
  color: rgb(9, 56, 9);
}

.remove {
  background: #C76868;
  color: #FFF;
  font-weight: bold;
  font-size: 21px;
  border: 0;
  cursor: pointer;
  display: inline-block;
  padding: 4px 9px;
  vertical-align: top;
  line-height: 100%;
}

input[type="text"],
select {
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
  <button class="addfields" ng-click="addNewChoice()">Add choice</button>
  <fieldset data-ng-repeat="choice in choicesA">
    <input type="text" ng-model="choice.name" name="" placeholder="Enter name">
    <button class="remove" ng-click="removeChoice($index)">-</button>
    <button class="addfields" ng-click="addNewChoiceB(choice)">Add fields</button>
    <div data-ng-repeat="choiceb in choice.choicesB">
      <input type="text" ng-model="choiceb.name" name="" placeholder="Enter field">
      <button class="remove" ng-click="removeChoiceB(choice,$index)">-</button>
    </div>
  </fieldset>


  <div id="choicesDisplay">
    <pre>choicesA = {{ choicesA }}</pre>
    <pre data-ng-repeat="choiceb in choicesA">choicesB = {{ choiceb.choicesB }}</pre>
  </div>
</div>

Updated

Live example on jsfiddle.

Thanks a lot for your reply, I tried to edit your code to meet my needs but I failed. I edited my original post to describe more my case, sorry.

charlietfl · Accepted Answer · 2016-02-29 04:17:10Z

1

I believe what you are trying to do is have 2 nested arrays.

Then you would have nested ng-repeat. You keep track of which array by passing that array as argument of function

View

 <fieldset data-ng-repeat="group in choices">
    <div ng-repeat="choice in group">
      <input type="text" ng-model="choice.name" name="" placeholder="Enter name">
      <button class="addfields" ng-click="addNewChoice(group)">Add fields</button>
      <button class="remove" ng-click="removeChoice(group)">-</button>
    </div>
 </fieldset>

JS

$scope.choices = [
  // first group
  [{id: 'choice1'}, { id: 'choice2'}],
  //second group
  [{}]
];


$scope.addNewChoice = function(group) {
  var newItemNo = group.length + 1;
  group.push({
    'id': 'choice' + newItemNo
  });
};

$scope.removeChoice = function(group) {
  group.pop();
};

Note you will need to modify your ID system a bit. Normally this would come from server anyway

DEMO

answered Feb 29, 2016 at 4:17

charlietfl

172k14 gold badges125 silver badges154 bronze badges

1 Comment

Dwix Over a year ago

@charlieftfl Thank you, your answer helped a lot and I'm sorry if it was unclear, I edited my original post to describe more my case.

Hassan Tariq · Accepted Answer · 2016-02-29 04:24:55Z

1

<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset>
<input  data-ng-repeat="choice in choicesA" type="text" ng-model="choice.name" name="" placeholder="Enter name">
<button class="addfields" ng-click="addNewChoice()">Add fields</button>
<button class="remove" ng-click="removeChoice()">-</button>
</fieldset>

First portion of your requirment is solved by this that textbox is added to sepecific fieldset and 2nd requirment is unclear to me replace your htmlcode with this

answered Feb 29, 2016 at 4:24

Hassan Tariq

7407 silver badges15 bronze badges

Collectives™ on Stack Overflow

Add buttons dynamically which also add textboxes dynamically AngularJS

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related