如何在使用ng-repeat和angularjs中的數組時創建對象

Question

大家好我遇到了用ng-repeat創建對象的問題。當我聲明的對象，然後在相同的值填充在具有相同的ng模型值的文本框中。如果我不聲明對象，那麼重複不會發生。 如果我聲明$ scope.user = {};在js文件中發生問題。請檢查這個。儘快給我一個解決方案。

我的小提琴鏈接請檢查該http://jsfiddle.net/Ladjkp5s/1/

這裏是我的HTML文件

<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> 

這裏是我的JS文件

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

感謝。

Answer 1

的問題是，你正在使用相同的NG-模型爲每個項目。（用戶。 fieldName），你必須使用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/

Answer 2

優能在控制器功能不循環，但你可以創建控制器中的循環HTML就像這個例子

<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>