2

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>
Community
  • 1
  • 1
forgottofly
  • 2,729
  • 11
  • 51
  • 93
  • What do you mean by "save"? With ngModel pointing to `item.id`, the values for item ids are updated in real-time as the user types in the data. And, your `$scope.items` array is wrong: it should be a list of objects in the form `{id: 1}, {id: 2}`, etc. – Dzinx Sep 25 '15 at 11:54

4 Answers4

9

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>
DonJuwe
  • 4,477
  • 3
  • 34
  • 59
  • please find this plunker http://plnkr.co/edit/T0WJFs2b62GVbHzOxtzE?p=preview I'm getting duplicate index for the columns.How can I avoid that – forgottofly Sep 25 '15 at 12:35
  • Since you have two `ng-repeat`s, you need to expand your data structure. I suggest store your data in an *array* of *objects*. – DonJuwe Sep 25 '15 at 13:11
1

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>
RAMESHKUMAR
  • 316
  • 4
  • 11
0

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>
Community
  • 1
  • 1
Rayon
  • 36,219
  • 4
  • 49
  • 76
  • please find this plunker http://plnkr.co/edit/T0WJFs2b62GVbHzOxtzE?p=preview I'm getting duplicate index for the columns.How can I avoid that – forgottofly Sep 25 '15 at 12:36
  • This is not the approach I had advised. Go through my answer again. – Rayon Sep 25 '15 at 12:38
  • But the structure is like that,months in first row and the output type in the first column and the values – forgottofly Sep 25 '15 at 12:42
  • If you want to maintain object with reference to your months then you need to have object of that month, object can store data in `key`->`value` structure. Single dimension array can not help in such cases.. – Rayon Sep 25 '15 at 12:45
0

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>
pam05
  • 1
  • 2