Using Angular's ng-repeat directive in combination with an input field

Question

Using Angular's ng-repeat directive in combination with an input field

Here's a view snippet I'm working with:

<table class="table">
   <tr data-ng-repeat="exercise in exercises x">
      <td>
           <input type="number" data-ng-model="?????????" />
       </td>
        <td>
           {{exercise.Name}}
        </td>
     </tr>
  </table>

I'm trying to figure out what value should go into the data-ng-model attribute for two-way data binding to work correctly so I can access the input's value in my controller.

I attempted using

data-ng-model="{{exercise.Name}}"

, but it caused errors.

Additionally, how can I reference specific inputs in the controller? Is there a way to do something like: $scope.InputOne = ...

javascript angularjs

Answer 1

Answer №1

Utilize data-ng-model="exercise.Name" without including the {{}} brackets.

A helpful starting point can be found at the angular tutorial page.

Answer 2

Utilize data-ng-model="exercise.Name" without including the {{}} brackets.

A helpful starting point can be found at the angular tutorial page.

Answer 3

Answer №2

Utilize ng-model for two-way binding, and ng-bind or {{}} brackets for one-way binding.

This illustrative example showcases the use of both methods and how to access object information.

Note: The controller should not have direct visibility into the view.

<body data-ng-app="app">
 <div data-ng-controller="TestCtrl">
  <table>
    <tbody>
      <tr data-ng-repeat="exercise in exercises">
        <td>
           <input type="number" data-ng-model="exercise.Name" />
        </td>
        <td data-ng-bind="exercise.Name"></td>
        <td><button data-ng-click="getInformation($index)">Get information</button></td>
      </tr>
    </tbody>
  </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>

var app = angular.module('app', []);

app.controller('TestCtrl', function($scope) {

$scope.exercises = [{Name:1},
                    {Name:2},
                    {Name:3},
                    {Name:4}
];

$scope.getInformation = function(index) {
  alert($scope.exercises[index].Name);
}        
});

Answer 4

Utilize ng-model for two-way binding, and ng-bind or {{}} brackets for one-way binding.

This illustrative example showcases the use of both methods and how to access object information.

Note: The controller should not have direct visibility into the view.

<body data-ng-app="app">
 <div data-ng-controller="TestCtrl">
  <table>
    <tbody>
      <tr data-ng-repeat="exercise in exercises">
        <td>
           <input type="number" data-ng-model="exercise.Name" />
        </td>
        <td data-ng-bind="exercise.Name"></td>
        <td><button data-ng-click="getInformation($index)">Get information</button></td>
      </tr>
    </tbody>
  </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>

var app = angular.module('app', []);

app.controller('TestCtrl', function($scope) {

$scope.exercises = [{Name:1},
                    {Name:2},
                    {Name:3},
                    {Name:4}
];

$scope.getInformation = function(index) {
  alert($scope.exercises[index].Name);
}        
});

Using Angular's ng-repeat directive in combination with an input field

Answer №1

Answer №2

Similar questions

Issue with localstorage in app startup

What is the best way to utilize a for-loop for updating values in a JavaScript variable?

Exploring the JSON object and dynamically incorporating elements into it is my goal as I navigate through AngularJS

Top method for referencing HTML layout across various pages

Is It Possible to Run Javascript Code Based on a Specific Screen Size?

Revamp your code by utilizing ES6 class to replace multiple if statements in Javascript

Build a Node.js application with Express to host static files

Prevent user input in calendar view using HTML classes

When using AngularJS and Require together, there may be instances where the r.js

What is the best way to send a JSON Object containing option parameters in order to open a new window?

Updating the icon image for navigation in AngularJS

Identifying errors in a React component upon loading

Utilizing Angular JS to ensure services are universally accessible across controllers and views

Show that a CPU-intensive JavaScript function is executing (animated GIF spinners do not spin)

Prevent button interaction until completion of modal animation using Bootstrap 4

I recently created a "dist" folder through Babel. Is it possible to integrate the files within this folder directly into a fresh React project?

Display the contents of a post within the same page using ReactJS

The alignment issue of Owl Carousel card being off-center

The second JSP page fails to load following an AJAX POST request

The error message "Error: [$http:badreq] - Angular JS" is being displayed when attempting to use $inject in a service