如何在 AngularJS 中使用 ng-repeat 和 array 时创建对象

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

本文关键字：ng-repeat array 创建对象 AngularJS      更新时间：2023-09-26

大家好 我面临着使用 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);
});

谢谢。

问题是你对每个项目都使用相同的ng模型。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/

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>
相关文章：