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_values[task.id]" >
     </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 im using ng-model="task_input_values[task.id]" it give me the array like {"14":"sometext here"} i dont know how to capture the id that is 14 and input value that is sometext here. Moreover, if u have any better logic please help me. I'm newbie in angularJS.

can u please be more specific what you are trying to achieve. Example would be nice — Yerken
– Yerken, Commented Jan 6, 2016 at 15:58
Thanks for your reply. Here in myy case im getting this array {"14":"sometext here"} from ng-model="task_input_values[task.id]" please help me how to get the key and text from array that is generated by this ng-model — angularjs baby
– angularjs baby, Commented Jan 6, 2016 at 16:02
Can you give us an output of at least 10 elements ? Your question is really confusing ! I would like to answer it but it's impossible to understand your problem. See below - my answer. But apparently it doesn't satisfy you. — julien bouteloup
– julien bouteloup, Commented Jan 11, 2016 at 10:46
Possible duplicate of AngularJS: how to generate dynamic ng-model for input type = text — Günther Jena
– Günther Jena, Commented Oct 25, 2016 at 9:53

Patrice De Saint Steban · Accepted Answer · 2016-01-06 16:00:57Z

0

You can edit directely the object you are iterate :

<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.title" >
     </li>
    </ul>
</form>

answered Jan 6, 2016 at 16:00

Patrice De Saint Steban

7435 silver badges13 bronze badges

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

Comments

julien bouteloup · Accepted Answer · 2016-01-06 17:03:34Z

See live demo: live demo You just need to use your tasks variable as an array of objects:

$scope.taskslist = [ 
     {title: "I am first text input"}, 
     {title: "I am second text input"} 
    ];

and then bind to the value property of the object in the ngRepeat:

<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.title" >
         </li>
     </ul>
</form>

Since tasks is an array - you don't need to specify the id as tasks[$index] give you the value of the title ;) Ex: tasks[1] gives you: {text: "I am second text input"}

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related