ng-model與ng-repeat中的元素綁定Angularjs

Question

如何將ng-model綁定到ng-repeat內的元素？ 實際上，我想將數組中的對象綁定到元素，並在輸入元素中鍵入時使用新的ng模型創建新的輸入元素。而在這個例子中所有的ng模型都是一樣的。

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

Answer 2

我想你想這一個。請注意，我用

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

做出複製對象的。沒有這個，你總是把參考相同的對象放在數組中，所以改變其中的一個也會導致其他的被改變。

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 3

您也可以使用密鑰作爲模型

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