Save all the values in input text box that is in n

2019-06-07 06:31发布

站内问答 / JavaScript
705 4 4

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>

4条回答
在下西门庆
2楼-- · 2019-06-07 07:07

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>

查看更多
0人赞 添加讨论(0) 举报
地球回转人心会变
3楼-- · 2019-06-07 07:09 

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>

查看更多
0人赞 添加讨论(0) 举报
在下西门庆
4楼-- · 2019-06-07 07:13

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>

查看更多
0人赞 添加讨论(0) 举报
一纸荒年 Trace。
5楼-- · 2019-06-07 07:25

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)