可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm figuring out how can I save the values that are entered in the input text box inside ng-repeat on a single click of a button.I have seen examples like this getting values from text box that lets user to save each text box individually. Below is a sample code:

$scope.items=[1,2,3,4]

<div ng-repeat="item in items">
<input type="text" ng-model=item.id>
</div>
<button type="button" ng-click="saveAllValues()">Save</button>

回答1:

You just bind the ng-model to another object and use $index to refer to the index within the very ng-repeat:

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
  $scope.items = [1, 2, 3, 4];
  $scope.values = [];
  
  $scope.saveAllValues = function() {
    alert($scope.values);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat="item in items">
    <input type="text" ng-model="values[$index]">
  </div>
  <button type="button" ng-click="saveAllValues()">Save</button>
</div>

回答2:

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
      $scope.items = [1, 2, 3, 4];   
      $scope.saveAllValues = function() {
        alert($scope.items);
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat="$index in items">
    <input type="text" ng-model='items[$index]'>
  </div>
  <button type="button" ng-click="saveAllValues(items)">Save</button>
</div>

回答3:

Try this:

You need to have . notation in your model. Refer this

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.items = [{
      value: 0
    }, {
      value: 1
    }, {
      value: 2
    }]
    $scope.saveAllValues = function(items) {
      alert(JSON.stringify(items));
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/angular.min.js"></script>
</head>

<body ng-controller="myController">
  <div ng-repeat="item in items">
    <input type="text" ng-model='item.value'>
  </div>
  <button type="button" ng-click="saveAllValues(items)">Save</button>
</body>

</html>

回答4:

I was stuck in the same and found something good "ng-model-option" set is to update on blur and you are ready to save individual inputs value while doing "ng-repeat". You'll need to add newer version of angularjs, try this "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
  $scope.items = ['red', 'blue', 'green', 'yellow'];
  
  $scope.saveAllValues = function() {
    alert($scope.items );
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat="item in items">
    <input type="text" ng-model="items[$index]" ng-model-options="{updateOn:'blur'}">
  </div>
  <button type="button" ng-click="saveAllValues()">Save</button>
</div>