如何在ng-repeat中为AngularJs中的mutilpe文本字段实现ng模型？

这是我的代码如何在ng-repeat中为AngularJs中的mutilpe文本字段实现ng模型？

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

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

这是我的jsfiddle http://jsfiddle.net/0c5p38dt/5/ 在上面的代码我有多个对象的阵列，这些目的从服务动态获取。当我再次单击添加按钮时，相同的对象将推到相同的数组。我在ng-repeat内部使用ng-model作为textfield。但是当我输入的数据也会影响其他文本域。所以如何区分数组中多个相同对象的ng模型值。

来源

2016-03-26 durga siva kishore mopuru

如你所说，同样的对象推到相同的阵列。输入数据时，您正在修改相同的对象，因此绑定到相同ng模型的所有字段也会被更改。在addField函数中，如果克隆该对象，即angular.copy（obj）。在将其推入阵列之前，您应该看到区别。但我不确定这是否是你想要的。 – sdfacre

您的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/

来源

2016-03-26 04:25:58

谢谢你@Richard Pressler。我想要输出的是你给出的确切代码。非常感谢你 –

如何在ng-repeat中为AngularJs中的mutilpe文本字段实现ng模型？

回答

相关问题