Creating dynamic ng-model for input type [text] in AngularJS

Question

Creating dynamic ng-model for input type [text] in AngularJS

Here is the current situation I'm dealing with in my code:

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

In the taskslist array, if I have 100+ tasks, it means I will also have more than 100 identical values for ng-model on the <input type="text"> elements. Currently, I am using

ng-model="task_input_values[task.id]"

which gives me an array like {"14":"sometext here"}. However, I'm struggling to capture both the id, such as 14, and the corresponding input value like sometext here. If you have any suggestions for a better approach or logic, please share as I am new to AngularJS.

javascript angularjs

Answer 1

Answer №1

If you want to make changes directly to the object you are currently iterating through, you can do so easily:

<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

If you want to make changes directly to the object you are currently iterating through, you can do so easily:

<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 3

Answer №2

Take a look at the live demonstration: live demo. To implement this, all you need to do is use your variable called `tasks` as an array of objects:

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

Then, simply bind to the value property of the object in the ngRepeat directive:

<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 the `tasks` variable is an array, there's no need to specify the id as `tasks[$index]`, as {{tasks[$index]}} already provides you with the value of the title. For example, {{tasks[1]}} will display: {text: "I am second text input"}

Answer 4

Take a look at the live demonstration: live demo. To implement this, all you need to do is use your variable called `tasks` as an array of objects:

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

Then, simply bind to the value property of the object in the ngRepeat directive:

<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 the `tasks` variable is an array, there's no need to specify the id as `tasks[$index]`, as {{tasks[$index]}} already provides you with the value of the title. For example, {{tasks[1]}} will display: {text: "I am second text input"}

Creating dynamic ng-model for input type [text] in AngularJS

Answer №1

Answer №2

Similar questions

What is the process by which a web browser executes a ".jsx" file while in development?

Leveraging Javascript Modules within a Typescript Vue Application

Highcharts is experiencing a duplication issue with the Y-Axis Series

Having trouble with clearInterval in my Angular code

Attempting to activate template rendering with Meteor session

Is there a way to fetch a random record from a MongoDb collection and exhibit all the fields of that haphazardly chosen document in HTML?

What is the best way to trigger UseEffect when new data is received in a material table?

PHP Ajax login form to instantly authenticate without redirecting to a new page

Notification pop-up for accepting cookies on a website

Images are failing to load dynamically in the Ionic application

Shared codes are compatible with both C and Javascript programming languages

An error is displayed when attempting to construct an express-react application

Tips for identifying when a tab has been reopened following closure?

How can I dictate the placement of a nested Material UI select within a popper in the DOM?

Decoding strings containing spaces in AngularJS directives

Instantiate an object of the ng.IQService type without using injection

The ng-repeat directive is specifically designed to loop through a List object, and does not support iterating over Iterable

Exploring promises with loops and patience?

At what point does the cleanup function in UseEffect activate the clearInterval() function?

I'm experiencing an issue with Bootstrap 5 where the code runs fine on codeply but not on my local machine