Angular ng-repeat with input

Question

I have a view like this:

<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 wondering what should I put as data-ng-model so I can use two-way data binding i.e., the input's value, in my controller?

I've tried data-ng-model="{{exercise.Name}}" but that resulted in errors.

Also, how can I reference certain input in the controller? Can I do something like this: $scope.InputOne = ...

I was away from the PC ;)

hyperN
– hyperN

2013-12-13 01:13:09 +00:00
Commented Dec 13, 2013 at 1:13 — hyperN
– hyperN, Commented Dec 13, 2013 at 1:13

Beyers · Accepted Answer · 2013-12-13 00:46:23Z

5

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

I suggest you start at the angular tutorial.

answered Dec 13, 2013 at 0:46

Beyers

9,11847 silver badges59 bronze badges

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

1 Comment

hyperN Over a year ago

Thanks, please can you tell me how can I get data for particular input in controller ?

Leonardo Andrade · Accepted Answer · 2013-12-13 02:17:54Z

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

this example demonstrates to use the two ways and how to get information of the object.

ps: the controller should not "see" the view directly.

<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);
}        
});

Collectives™ on Stack Overflow

Angular ng-repeat with input

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related