Question

如何将ng-model绑定到ng-repeat中的元素？实际上我想将数组中的对象绑定到元素，并且当输入元素中的类型创建具有新ng-model的新输入元素时。而在这个例子中，所有ng模型都是相同的。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

制作对象的副本。如果没有这个，你总是在数组中引用相同的对象，因此更改其中一个会导致其他对象也被更改。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果你传递$scope.items.push($scope.item);，那么$scope.item引用同一个对象，它会多次推送到数组，因为对象是引用类型，如果你推送primitive数据类型它将采取不同的行动，

在函数中定义item local {/ p>

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您也可以将密钥用作模型的数组键

<!doctype html >
<html ng-app="app">
<head>
    <meta charset="UTF-8">
	
    <title>Restangular</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.min.js"></script>
</head>
<body>
    <div ng-controller="IndexCtrl as omega" ng-cloak>
        <ul>
            <li ng-repeat="result in omega.people">
                <span ng-bind="result.subject"></span>
            </li>
        </ul>
    </div>
 
    <script>
        var app = angular.module('app', ['restangular'])
            .config(function(RestangularProvider) {
                RestangularProvider.setBaseUrl("/js/user.json");
            });
 
        app.controller('IndexCtrl', function( Restangular) {
            var self=this;
            /*
            self.people = Restangular.all('user').getList();
            */
            Restangular.all('user').getList().then(function(result) {
            self.people = result;
            });
        });
         
    </script>
</body>
</html>

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

3 个答案: