Adding button functionality individually in angularjs template

Question

I have a template. In the template, there are three boxes. Each box has add button, which will add an input field in that box. I have tried the following codes.

HTML

<div class="row">
        <div ng-repeat="item in items2">
          <div class="theBox">
            <button class="btn btn-success" ng-click="addItem()">add</button>
            <h6>{{item.key}}</h6>

            <input ng-model="item.value">
          </div>
        </div>

</div>

AngularJs

 $scope.items2 = [
      {
        "key" : "a",
        "value" : []
      },
      {
        "key" : "b",
        "value" : []
      },
      {
        "key" : "c",
        "value" : []
      }
  ];


  $scope.addItem = function(){
    console.log("clicked ")
   angular.forEach($scope.items2, function(mm){
     mm.value.push({})
   })

  }

The Problem: If I click on add, it's creating an object inside each value, maybe because I have used the forEach-loop for each value. How can I add it individually?

Also The input tag is not added as well, how can I fix that ?

illeb · Accepted Answer · 2017-10-13 14:49:55Z

2

Your question it's not exactly clear.

If you are going to

add an input field in that box

every time you click on the add button, then you will need another ng-repeat in your HTML. Something like:

<div class="row">
    <div ng-repeat="item in items2">
      <div class="theBox">
        <button class="btn btn-success" ng-click="addItem(item)">add</button>
        <h6>{{item.key}}</h6>

        <input ng-repeat="itemValue in item.value" ng-model="itemValue.text">
      </div>
    </div>

and your javascript to:

$scope.addItem = function(item){ 
    item.value.push({text:""});
}

edited Oct 13, 2017 at 14:49

answered Oct 13, 2017 at 14:39

illeb

2,9471 gold badge23 silver badges35 bronze badges

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

2 Comments

TheTechGuy Over a year ago

This is really close what i am expecting. however the controller is not taking the values from the input field once its created

illeb Over a year ago

Yeah, my bad. as @Maxim Shoustin suggested in his post, you need to create a "text" parameter for your input. i'll edit my post accordingly

Maxim Shoustin · Accepted Answer · 2017-10-13 14:42:44Z

which will add an input field in that box.

If I understand you right you want to add <input>s to specific box.

I would write something that:

<div class="row">
        <div ng-repeat="item in items2">
          <div class="theBox">
            <button class="btn btn-success" ng-click="addItem(item)">add</button>
            <h6>{{item.key}}</h6>
          <div ng-repeat="value in item.values">
             <input  ng-model="value.text">
            </div>    
          </div>
        </div>
</div>

and method will be:

 $scope.addItem = function(selectedItem){
   selectedItem.values.push({text:""});  
 }

Demo Plunker

Tips:

If you have list og inputs, the good practice to name it values and not value in { "key" : "a", "value" : [] },
input ng-model is based on string and not object so will be better to set {text:""} and <input ng-model="value.text">

Collectives™ on Stack Overflow

Adding button functionality individually in angularjs template

2 Answers 2

2 Comments

Tips:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Tips:

Comments

Your Answer

Sign up or log in

Post as a guest

Related