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

Is there a way to upload multiple files using expressjs?

Errors in Compiling Dependencies for d3.js Using Typescript

Learn the best way to send query parameters through the Next.js navigation router and take advantage of

What is the best way to access the methods in the "parent" class?

The Material UI Icon is missing from the location '@mui/icons-material/Send.js'

Transmitting the User's Geographic Location and IP Address Securely in a Hidden Input Field

The functionality of the Javascript window.print() method is limited to a single use

Tips for ensuring that the horizontal scroll bar remains consistently positioned at the bottom of the screen

Apply a class to each consecutive element following the current one until reaching a child element with a

What is the best way to modify an Li element using the DOM in JavaScript?

A guide to managing Ajax in functional components in React without using classes

Flag form field as invalid in AngularJS

Having trouble grasping the purpose of app.use('/') in the Express framework

What is preventing my counter from functioning when I click on the canvas?

Issue with Jquery: Checkbox fails to get checked in Internet Explorer 7

Versatile dataTable designed to seamlessly integrate with various data structures

The AJAX request was successful, however, the PHP script did not return any

I'm currently working with ReactJS and attempting to retrieve JSON data from a REST API in JIRA, but I'm facing challenges in achieving this

Mongoose/JS - Bypassing all then blocks and breaking out of the code

Learn how to gradually make text disappear and reappear using JavaScript or jQuery