Question

这是我的代码

＆＃13;

function Ctrl($scope) {
  $scope.data = [];

  $scope.data = [{
    "label": "name",
    "type": "string"
  }, {
    "label": "email",
    "type": "string"
  }];
  $scope.addFields = function() {
    var count = 0;
    angular.forEach($scope.data, function(obj) {
      if (count == 2) {
        return true;
      }
      $scope.data.push(obj);
      count = count + 1;
    });
  };
  $scope.save = function() {
    console.log($scope.data);
  };
}

＆＃13;

<div ng-app>
  <div ng-controller="Ctrl">
    <input type="button" value="add" ng-click="addFields()" />
    <div ng-repeat="eachItem in data">
      <label>{{eachItem.label}}</label>
      <input type="text" ng-model="eachItem.value" />
    </div>
    <input type="button" value="save" ng-click="save()" />
  </div>
</div>

＆＃13;

这是我的jsFiddle http://jsfiddle.net/0c5p38dt/5/ 在上面的代码中，我有一个包含多个对象的数组，这些对象是从动态获取的。当我再次单击添加按钮时，同一对象推送到同一个数组。我在ng-repeat中使用ng-model for textfield。但是，当我输入将对其他文本字段产生影响的数据时。那么如何区分数组中多个相同对象的ng-model值。

Answer 1

您的addFields()函数未添加具有自己对象的字段。它正在创建指向现有对象的新字段。

基本上，当你的addFields()被调用时，它会说“添加两个指向与前两个字段相同的对象的新字段”。这就是为什么他们都拥有相同的模型。

解决方案是实际创建一个新对象，它是addFields()函数中原始文件的克隆，如下所示：

$scope.addFields = function () {
    var count=0;
    angular.forEach($scope.data,function(obj){
        if(count==2){
            return true;
        }

        // Create a new object with the same properties as the original
        var newObj = {'label':obj.label, 'type':obj.type}
        $scope.data.push(newObj);
        count=count+1;
    });
};

我修改了你的jsFiddle：http://jsfiddle.net/nhupL4gs/

如何在AngularJs中的mutilpe文本域中实现ng-repeat内部的ng-model？

1 个答案: