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

Question

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

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

Answer 2

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

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

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