Question

Hello Everyone 我在使用ng-repeat创建对象时遇到问题。当我声明对象然后在具有相同ng-model值的文本框中填充相同的值。如果我不声明对象，则不会发生重复。如果我声明$ 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-model。（user.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

Yuu无法在控制器函数中循环，但你可以像在这个例子中那样创建在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>

如何在angularjs中使用ng-repeat和数组时创建对象

2 个答案: