Question

我正在创建一个具有添加/删除功能的表单。为实现这一目标，我尝试在ng-model中使用ng-repeat。这是我的代码的样子。

<button ng-click='add()'>Add more</button>
<div ng-repeat='x in array track by $index'>
    <input ng-model='array[$index].name'></input>
    <input ng-model='array[$index].phone'></input>
    <input ng-model='array[$index].email'></input>
</div>

//angular module
$scope.add = function () {
    $scope.array.push(item);
};

但是，所有输入字段都将被同步，并且数组中的所有项目看起来都是一样的，这是我不打算做的。另外，我在codepen中制作了我的代码示例。

Answer 1

所以基本上你每次都会向列表推送一个“项目” - 参考，所以你最终得到一个项目的多个引用列表。

您可以执行以下操作：

angular.module('myapp', [])
.controller('Ctrl', ['$scope', '$compile',function ($scope, $compile) {
  $scope.array = [];
  var item = {
    name: '',
    phone: '',
    email: '',
  };

  $scope.array.push(item);
  $scope.addItem = function () {

    $scope.array.push(
      {
        name : '',
        phone: '',
        email: '',        
      }    
    );

  };
}]);

然后它会工作。个人对html的看法。为简单起见，许多人都像这样重复：

<div ng-repeat='x in array'>
    <input ng-model='x.name'></input>
    <input ng-model='x.phone'></input>
    <input ng-model='x.email'></input>
</div>

Answer 2

将您的javascript更改为：

create or replace function func(dir text, num integer, pos integer=0) returns refcursor as $$
declare
  ref refcursor;
begin
   open ref for execute
     ' select * from test '
     ' order by x ' || case dir when 'F' then 'ASC' when 'B' then 'DESC' end ||
     ' limit ' || num ||
     ' offset ' || pos;
   return ref;
end;
$$ language plpgsql;

您必须存储每个名称，电子邮件和电话是单独的型号。

之后，当您在数组中添加项目时，请确保重置它们。

同时在html中更改模型的名称。

检查here。

Answer 3

每次推送item，您都会推送对同一对象的引用。因此，当在输入字段中进行更改时，您会看到所有数组节点中的更新 - 它们引用相同的item。

快速解决方法是在$scope.add()：

中推送项目的副本，而不是项目本身

$scope.array.push(angular.copy(item));

更好的方法是将item作为对象，您可以实例化它：

var Item = function (){
    return {
        name: '',
        phone: '',
        email: ''
    };
};

然后

$scope.array.push(new Item());

AngularJS使用ng-repeat和ng-model添加/删除功能

3 个答案: