Geek Answers Handbook

Save all the values ​​in the input text box, which is in ng-repeat

I will figure out how to save the values ​​entered in the input text box inside ng-repeat with the click of a button. I saw such examples of getting values ​​from a text field , which allows the user to save each text field individually. The following is 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
javascript angularjs angularjs-ng-repeat ng-repeat
source share
3 answers

You simply bind ng-model to another object and use $index to reference the index within 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>
+6
source share

 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>
+1
source share

Try the following:

Your model should have a designation . . See 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>
0
source share

More articles:


All Articles