How to use one model in ng-repeat using AngularJs?

Question

This is my Fiddle. http://jsfiddle.net/0c5p38dt/1/

In the above fiddle use ng-model in textfield and add save button

<input type="text" ng-model="eachItem.value"/>
<input type="button" value="save" ng-click="save()"/>

and i write code in js file :-

$scope.save=function(){
   console.log($scope.data);
};

In the above code first i click add button when i enter data in first textfield(name) that will also effect on second textfield(name). I want to save the data . So how to differentiate these textboxes.

Don't bind to primitives. http://stackoverflow.com/questions/13714884/difficulty-with-ng-model-ng-repeat-and-inputs and https://github.com/angular/angular.js/issues/1267. However you can achieve by this. https://plnkr.co/edit/tpl:8rFfZljYNl3z1A4LKSL2?p=preview — Arun Shinde, Mar 25 '16 at 09:14

score 0 · Answer 1 · answered Mar 25 '16 at 08:09

you should use a 'name' attribute in your input fields with angular

$index on ng-repeat.

in your Fiddle:

<div ng-app>
  <div ng-controller="Ctrl">
    <div ng-repeat="eachItem in data">
      <input type="button" value="add" ng-click="addFields(eachItem)"/>
      <label>{{eachItem.label}}</label>
      <input type="text" name="eachItem.label[$index]" />
  </div>
  </div>
</div>

The result would be like:

<input type="text" name="email[1]"> 
<input type="text" name="email[2]"> 
<input type="text" name="email[3]"> 
<input type="text" name="name[1]"> 
<input type="text" name="name[2]">

score 0 · Answer 2 · answered Mar 25 '16 at 08:12

I'm not completely sure what you want, but I don't think you want the <input> in an ng-repeat, maybe what you want is in your .html:

<div ng-app>
  <div ng-controller="Ctrl">
    <label>Name</label>
    <input type="text"ng-model="item.name"/>
    <label>Email</label>
    <input type="text"ng-model="item.email"/>
    <input type="button" value="add" ng-click="addFields(item)"/>
    <div ng-repeat="item in data">
       <div ng-bind="item.name"></div>
       <div ng-bind="item.email"></div>
    </div>
  </div>
</div>

and in your .js:

function Ctrl($scope) {
   $scope.data=[];
   $scope.addFields = function (item) {
      $scope.data.push(item);
   };
}

This will give you the inputs once and then keep track (and display) the data from the inputs

How to use one model in ng-repeat using AngularJs?

2 Answers2