how to create object while using ng-repeat and array in angularjs

Question

Hello Everyone I have face a problem to create a object with ng-repeat. when i declare the Object then the same value in filled in the text box which has same ng-model value. if i am not Declare the object then duplicacy is not occures. If i am declare the $scope.user = {}; in js file then problem is occures. please check this. Give me a solution ASAP.

My Fiddle Link Please Check This http://jsfiddle.net/Ladjkp5s/1/

Here is my Html file

<div ng-app="myApp">
  <div ng-controller='MainController' ng-init="start = 0; end = 5;">
     Start: <input ng-model="start"> End: <input ng-model="end">
     <ul>
       <li ng-repeat="item in items | slice:start:end">{{item + 1}}
          <div>
           Name: <input type="text" ng-model="user.name"><br>
           Address:  <input type="text" ng-model="user.add"><br>
           Phone:  <input type="text" ng-model="user.phn"><br>
           ZipCode:  <input type="text" ng-model="user.zip">
         </div>
       </li>
    </ul>
  </div>
</div>

Here is my JS File

var app = angular.module('myApp', []);
app.filter('slice', function() {
   return function(arr, start, end) {
   return arr.slice(start, end);
  };
});
app.controller('MainController', function($scope) {
 $scope.items = [];
  $scope.user ={};
   for (var i = 0; i < 5; i++) $scope.items.push(i);
});

Thanks.

Please try to avoid comments such as "Give me a solution ASAP." on SO. — artm
– artm, Commented Nov 24, 2014 at 13:09

Rasalom · Accepted Answer · 2014-11-24 13:11:34Z

The problem is that you are using same ng-model for every item.(user.fieldName) you have to use item.fieldName.

<div ng-app="myApp">
  <div ng-controller='MainController' ng-init="start = 0; end = 5;">
    Start: <input ng-model="start"> End: <input ng-model="end">
    <ul>
      <li ng-repeat="item in items | slice:start:end">{{item.index + 1}}
       <div>
            Name: <input type="text" ng-model="item.name"><br>
           Address:  <input type="text" ng-model="item.add"><br>
           Phone:  <input type="text" ng-model="item.phn"><br>
           ZipCode:  <input type="text" ng-model="item.zip">
         </div>
      </li>
    </ul>
  </div>
</div>

http://jsfiddle.net/3akwk7tv/

Strahinja Djurić · Accepted Answer · 2014-11-24 13:08:48Z

0

Yuu can not loop in controller function, but u can create controller that loops in html like in this example

<ul>
  <li ng-repeat="theItem in myData.items">{{theItem.text}}</li>
</ul>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ];
    });
</script>

answered Nov 24, 2014 at 13:08

Strahinja Djurić

4041 gold badge3 silver badges14 bronze badges

1 Comment

Abhishek Over a year ago

Thanks #Strahinja Radju Djuric. thanks for solution.

Collectives™ on Stack Overflow

how to create object while using ng-repeat and array in angularjs

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related