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

Posted 2023-03-05

【中文标题】ng-model 绑定到 ng-repeat Angularjs 中的元素

【英文标题】：ng-model bind to element in ng-repeat Angularjs

【发布时间】：2015-10-18 14:28:31

【问题描述】：

如何将 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);
    
    
);

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

【问题讨论】：

是你想要的吗：$scope.items.push(angular.copy($scope.item));?

你到底想做什么？

@Ayush 我想动态创建表单。当输入输入元素时添加另一个输入元素。

【参考方案1】：

我想你想要这个。请注意，我使用

$scope.items.push(angular.copy($scope.item))

制作对象的副本。没有这个，你总是把对 same 对象的引用放在数组中，所以改变其中一个会导致其他对象也被改变。

var myApp = angular.module('app', []);
myApp.controller("MyCtrl",function($scope)
   $scope.items = [];
    $scope.item = 
        phone:""
    ;
    $scope.items.push(angular.copy($scope.item));

    $scope.addItem = function(index)
        if($scope.items[index+1] == null)
          $scope.items.push(angular.copy($scope.item));
        console.log($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>

【讨论】：

添加新元素时如何删除值？

@hadi，我认为这是在另一个 tread 中描述的 - 它有完美的解释。只需在控制器中添加 ng-click="remove(line)" 并添加 remove 行为

当输入第二个输入元素时，它添加了具有第一个输入元素值的新输入元素。虽然我不想要这个。

还将$scope.items.push($scope.item); 的第一次出现更改为$scope.items.push(angular.copy($scope.item));。有关详细信息，请参阅更新的答案

谢谢。它工作正常，但在控制台中出现此错误：错误：[ngModel:nonassign] errors.angularjs.org/1.3.14/ngModel/nonassign?

【参考方案2】：

你也可以使用key作为模型的数组key

<div ng-repeat="(key, line) in items track by $index">
  <input ng-model="line.phone[key]" ng-keydown="addItem($index)"/>
</div>

【讨论】：

您忘记提及它的实际作用：<div>items|json</div> - 我认为这不是 OP 想要的

OP 应该将 phone 声明为一个数组。就像$scope.item = phone: [] ; 这样你上面的代码就可以完美运行了:-)

【参考方案3】：

如果你像$scope.items.push($scope.item);一样传递$scope.item是对同一个对象的引用，它会多次推送到数组，因为对象是被引用的类型，如果你推送primitive数据类型，它的行为会有所不同，

在函数中定义item局部，

$scope.addItem = function(index)
        if($scope.items[index+1] == null) 
            var item = 
                 phone:""
            ;
        
        $scope.items.push(item );
        console.log($scope.items);
  

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

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

【讨论】：

谢谢。它工作正常，但在控制台中出现此错误：错误：[ngModel:nonassign] errors.angularjs.org/1.3.14/ngModel/nonassign?

嗯不知道具体的错误是什么，在这个演示中没有控制台错误:(

@K.Toress。好的。这是正确的，控制台中没有错误。非常感谢。你的答案和 simoco 的答案是正确的，我不知道哪个接受 :(

:D 哈哈，选择对你有意义的那个 :) 不用担心