AngularJS: how to generate dynamic ng-model for input type = text

Question

My current scenario is: I've doing nesting repetition like follow:

<form name="task_form" ng-app="myApp" ng-submit="tasksubmit()">    
 <ul class="items-list">
      <li ng-repeat="task in taskslist | orderBy:orderProp">
      <p>
        <strong>{{task.title}}</strong>
      </p>
      <input type="text" ng-model="task.input_value">
     </li>
    </ul>
</form>

If in tasklist array i have 100+ tasks then it means i have more then 100 same ng-model values for <input type=text>. Here problem is that how can i get the values for <input type = text> against any task.id so that i can use those input values for my further use.

tymeJV · Accepted Answer · 2016-01-06 14:17:15Z

3

You can use an object - make the task.id as the key:

$scope.taskValues = {};

And the view:

<input type="text" ng-model="taskValues[task.id]">

answered Jan 6, 2016 at 14:17

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

4 Comments

Tech Kid Over a year ago

and how will i get the inputed value sir?

tymeJV Over a year ago

@TechKid -- Depends when you need it - you can loop over taskValues anytime - or you can attach a ngChange event to each input and grab the value at the time of typing

Tech Kid Over a year ago

Sir, can you please help with making plunker or fiddle, I actually want to get the input values along with task.id on the time of form submittion..

tymeJV Over a year ago

@TechKid -- you can do for (var taskID in $scope.taskValues) { console.log($scope.taskValues[taskID] }

Collectives™ on Stack Overflow

AngularJS: how to generate dynamic ng-model for input type = text

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related