ng-model绑定到ng-repeat中的元素,Angularjs。
ng-model绑定到ng-repeat中的元素,Angularjs。
如何将ng-model绑定到ng-repeat内的元素?
实际上,我想将数组中的对象绑定到元素,并在输入元素中键入时创建具有新ng-model的新输入元素。但在这个例子中,所有的ng-model都是相同的。
var myApp = angular.module('app', []);
myApp.controller("MyCtrl",function($scope){
$scope.items = [];
$scope.item = {
phone:""
};
$scope.items.push($scope.item);
$scope.addItem = function(index){
if($scope.items[index+1] == null)
$scope.items.push($scope.item);
console.log($scope.items);
}
});
ng-model bind to element in ng-repeat Angularjs问题的出现的原因是忘记声明phone为一个数组。没有声明phone为数组时,ng-model无法正确绑定到元素上。解决方法是在控制器中声明phone为一个空数组。以下是解决方法的代码示例:
$scope.item = { phone: [] };
通过将phone声明为数组,ng-model将能够正确地绑定到ng-repeat中的元素上。这样,ng-model将能够正确地跟踪和更新每个元素的值。
希望以上内容能够帮助你解决ng-model bind to element in ng-repeat Angularjs的问题。
问题的原因是在ng-repeat中使用ng-model绑定一个元素时,如果使用$scope.items.push($scope.item);
这样的方式,那么$scope.item
会引用相同的对象,并且会多次将其推送到数组中。因为对象是引用类型,如果推送的是原始数据类型,会有不同的行为。解决方法是在函数中定义一个局部变量item
,将其推送到数组中。
以下是一个解决该问题的示例代码:
var myApp = angular.module('app', []); myApp.controller("MyCtrl",function($scope){ $scope.items = []; var item = { phone:"" }; $scope.items.push(item); $scope.addItem = function(index){ if($scope.items[index+1] == null) { var item = { phone:"" }; $scope.items.push(item ); console.log($scope.items); } } });
在HTML中使用ng-repeat创建多个输入框,并将其绑定到$scope.items数组中的元素:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="MyCtrl"> <div ng-repeat="line in items track by $index"> <!-- typing here should auto update it's preview above --> <input ng-model="line.phone" ng-keydown="addItem($index)"/> <!-- many other fields here that will also affect the preview --> </div> </div>
这段代码可以正确工作,但在控制台中会出现一个错误:Error: [ngModel:nonassign] errors.angularjs.org/1.3.14/ngModel/nonassign。具体错误原因不明,因为在这个示例中没有控制台错误。
解决该问题的方法有两种,一种是忽略控制台错误,另一种是根据错误信息进行修复。最后作者建议选择能理解的解决方法,并且不用担心选择哪个答案。
问题的出现原因是:在ng-repeat指令中,通过ng-model绑定到元素时,如果不使用angular.copy()方法复制对象,而是直接将对象推入数组中,那么会导致数组中的每个对象都指向同一个对象的引用。因此,改变一个对象的值会导致其他对象的值也发生改变。
解决方法是:在将对象推入数组之前,使用angular.copy()方法复制对象,确保每个对象都是独立的副本。具体代码如下:
$scope.items.push(angular.copy($scope.item));
此外,还有一个相关的问题,当在第二个输入框中输入时,会添加一个新的输入框,并且新输入框的值与第一个输入框的值相同。解决方法是:在第二个输入框的ng-keydown属性中添加一个函数addItem($index),并在控制器中定义该函数,用于判断是否需要添加新的输入框,并在需要时复制当前输入框的值。具体代码如下:
$scope.addItem = function(index){ if($scope.items[index+1] == null) $scope.items.push(angular.copy($scope.item)); console.log($scope.items); }
另外,如果在控制台中出现错误信息"Error: [ngModel:nonassign]",请确认该错误是否与以上代码相关。