Angularjs passing multiple inputs from HTML to controller using one ng-model

Question

So I have some input text boxes in my html which I would like to send into my controller and add them to an object. What confuses me is how do I pass more than one value using only one ng-model. So far this is what I have in my html that reads out the number of inputs needed:

<div ng-repeat = "parameter in selectedMO.parameters">
   <label> Value for {{parameter.name}} </label>
   <input type="text" ngmodel="value"/>
</div>

Since I am using ng-repeat to add the necessary number of text boxes I only have one ng-model instead of different ones for every value.

angular.module('app.runBehaviorOper', [])
   .controller('runBehaviorOper', [ 'discoveryService','$scope', '$route',  
      function( discoveryService, $scope, $route) {

     //what should I do here in order to add each value inputted into 
     //an object in order to then be able to send it a function inside 
     //my discoveryService file

     $scope.getBehaviorExec = function() { //this is called with the submit
      // button in the html code

        discoveryService.getBehaviorExec({ 
           oid:              $scope.oid,
           parameters:       //send parameters

        });

     };

  }
]);

I am quite new to angularjs and the answers online have not worked so far for me.

ngmodel="value[$index]" This should give you an array of values. $index is created by ng-repeat. — Cerad
– Cerad, Commented Mar 24, 2015 at 18:10

Smokin Joe · Accepted Answer · 2015-03-24 18:25:50Z

1

I believe you'll want to take advantage of track by $index with regards to ngRepeat and then associating the value with an array defined on $scope.

Your code blocks could end up looking like:

<div ng-repeat = "parameter in selectedMO.parameters track by $index">
   <label> Value for {{parameter.name}} </label>
   <input type="text" ng-model="values[$index]"/>
</div>

NOTE: I changed ngmodel="value" to ng-model="values[$index]"

Then within your controller:

angular.module('app.runBehaviorOper', [])
   .controller('runBehaviorOper', [ 'discoveryService','$scope', '$route',  
      function( discoveryService, $scope, $route) {

     $scope.values = []; // This will contain all the input values

     $scope.getBehaviorExec = function() { //this is called with the submit
      // button in the html code

        discoveryService.getBehaviorExec({ 
           oid:              $scope.oid,
           parameters:       $scope.values // I'm assuming this is where you would use the various input values

        });

     };

  }
]);

Hope that works for you!

Solution the second:

Another approach (and probably cleaner), would be to utilize the same object you are iterating through:

<div ng-repeat = "parameter in selectedMO.parameters">
   <label> Value for {{parameter.name}} </label>
   <input type="text" ng-model="parameter.value"/>
</div>

Then within your controller:

angular.module('app.runBehaviorOper', [])
   .controller('runBehaviorOper', [ 'discoveryService','$scope', '$route',  
      function( discoveryService, $scope, $route) {

     $scope.getBehaviorExec = function() { //this is called with the submit
      // button in the html code

        discoveryService.getBehaviorExec({ 
           oid:              $scope.oid,
           parameters:       $scope.selectedMO.parameters // you will still need to access each $scope.selectedMO.parameters value since the parameters is now not just an array of input values

        });

     };

  }
]);

Give that the ol' college try - but it should work for you! And as you can see, it's a teeny bit cleaner!

edited Mar 24, 2015 at 18:25

answered Mar 24, 2015 at 18:09

Smokin Joe

4535 silver badges15 bronze badges

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

4 Comments

Smokin Joe Over a year ago

@SantiagoEsquivel - Here's a real quick and very simple plnkr I put together to hopefully demonstrate how it would work: plnkr.co/edit/sjPdV313dCeR5DGW72tS?p=preview

Santiago Esquivel Over a year ago

This works, thank you, I knew it was a simple solution I just was not sure how execute it, also is it possible to add the values to an object with the fields of value and parameter.name instead of using an array?

Smokin Joe Over a year ago

@SantiagoEsquivel - Check out the edit I threw up there. You are most correct that there doesn't need to be the array. And actually, associating the value with each iterated parameter object is most likely a better standard to follow. I've also updated the plnkr to display your requested changes!

Santiago Esquivel Over a year ago

I thank you very much for the detailed response and followup.

Collectives™ on Stack Overflow

Angularjs passing multiple inputs from HTML to controller using one ng-model

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related