ng-model绑定到ng-repeat中的元素,Angularjs。

17 浏览
0 Comments

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

}

});

0
0 Comments

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的问题。

0
0 Comments

问题的原因是在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。具体错误原因不明,因为在这个示例中没有控制台错误。

解决该问题的方法有两种,一种是忽略控制台错误,另一种是根据错误信息进行修复。最后作者建议选择能理解的解决方法,并且不用担心选择哪个答案。

0
0 Comments

问题的出现原因是:在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]",请确认该错误是否与以上代码相关。

0