将所有值保存在 ng-repeat 中的输入文本框中 [英] Save all the values in input text box that is in ng-repeat

查看:18
本文介绍了将所有值保存在 ng-repeat 中的输入文本框中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在研究如何通过单击按钮保存在 ng-repeat 内的输入文本框中输入的值.我见过这样的例子 从文本框中获取值 允许用户保存每个文本框个别.下面是一个示例代码:

$scope.items=[1,2,3,4]<div ng-repeat="项目中的项目"><input type="text" ng-model=item.id>

<button type="button" ng-click="saveAllValues()">保存</button>

解决方案

您只需将 ng-model 绑定到另一个对象并使用 $index 来引用索引在 ng-repeat 中:

var myApp = angular.module('myApp', []);myApp.controller('MyCtrl', function($scope) {$scope.items = [1, 2, 3, 4];$scope.values = [];$scope.saveAllValues = function() {警报($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="项目中的项目"><input type="text" ng-model="values[$index]">

<button type="button" ng-click="saveAllValues()">保存</button>

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>

解决方案

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>

这篇关于将所有值保存在 ng-repeat 中的输入文本框中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆