AngularJS：如何为输入类型生成动态ng模型[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.

Answer 1

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>

Answer 2

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"}