获取由 ng-repeat 填充的输入的编辑值 |角度js答案

【问题标题】：get the edited values of an inputs filled by ng-repeat | Angular js获取由 ng-repeat 填充的输入的编辑值 |角度js
【发布时间】：2026-01-05 12:20:05
【问题描述】：

在我看来，用户双击一行会弹出详细信息，输入已被 ng-repeat 填充，用户可以更改值，但我的问题是我无法获取新的输入值。

我的看法：

/* This dislay the inputs with the value, ng-dblclick will get the input values*/
<tr ng-repeat="sf in selectedFacture" ng-dblclick="editFacture();" >
    <td><input class="cls" value="{{sf.fcls_crt}}"  type="text"/></td>
    <td><input class="piece" value="{{sf.fpiece}}" type="text"/></td>
    <td><input class="cls_gate" value="{{sf.fcls_crt_gate}}" type="text"/></td>
    <td><input class="piece_gate" value="{{sf.fpiece_gate}}" type="text"/></td>
    <td><input class="note" value="{{sf.note}}" type="text"/></td>
</tr>

JS：

// This function gets the **edited** values by input' class
$scope.editFacture=function(){

    var editedQuanCls=$(".cls").val();
    var editedQuan_piece=$(".piece").val();
    var editedQuan_cls_crt_gate=$(".cls_gate").val();
    var editedQuan_piece_gate=$(".piece_gate").val();
    var editedNote=$(".oNote").val();
    var editedNote_gate=$(".note").val();
    alert(editedQuanCls + " - " + editedQuan_piece + " - " + editedQuan_cls_crt_gate  + " - " + editedQuan_piece_gate + " - "+ editedNote + " " + editedNote_gate);

 }

我的问题是该函数只返回 ng-repeat 中第一个 tr 的值，我应该添加什么来获取所有值？非常感谢提前

【问题讨论】：

为什么不能在输入字段中使用ng-model？
停止使用 jQuery 来处理 Angular 更简单的事情。不应该在控制器中使用 dom 代码
请问你能给我举个例子吗？我对 Angular js 很陌生，这是我的第一个 Angular 项目，我尝试添加 ng-model 但输入的值更改为 ng-model 的值

标签： javascript angularjs input angularjs-ng-repeat angularjs-ng-click

【解决方案1】：

已重构您的代码。

var app= angular.module('myApp',[]);
app.controller('myController',function($scope){

  $scope.selectedFacture = [{}];
  $scope.editFacture=function(sf){
    sf = sf || {};
    var editedQuanCls= sf.fcls_crt,
    editedQuan_piece= sf.fpiece,
    editedQuan_cls_crt_gate= sf.fcls_crt_gate,
    editedQuan_piece_gate= sf.fpiece_gate,
    editedNote= sf.note;
    alert(editedQuanCls + " - " + editedQuan_piece + " - " + editedQuan_cls_crt_gate  + " - " + editedQuan_piece_gate + " - "+ editedNote);
  }

});

<html ng-app="myApp">
	<head></head>
	<body>
		<html ng-app="myApp">
	<head></head>
	<body>
		<div ng-controller="myController">
			<table>
				<tr ng-repeat="sf in selectedFacture">
					<td><input class="fcls_crt" ng-model="sf.fcls_crt" type="text"/></td>
					<td><input class="fpiece" ng-model="sf.fpiece" type="text"/></td>
					<td><input class="fcls_crt_gate" ng-model="sf.fcls_crt_gate" type="text"/></td>
					<td><input class="fpiece_gate" ng-model="sf.fpiece_gate" type="text"/></td>
					<td><input class="note" ng-model="sf.note" type="text"/></td>
					<td><input type="button" name="edit" value="Edit" ng-click="editFacture(sf);"/></td>
				</tr>
			</table>
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="app.js"></script>
	</body>
</html>

【讨论】：

为什么要在这里加载 angular 1.2.23？那真的很老了，并且已经弃用了其中的东西。
@MikeFeltman * 的 Snippets 允许您自动插入相关脚本，例如 AngularJS。他们的最高版本只有 1.2.23，足以运行 Snippet 进行测试
谢谢。很高兴知道。不过确实需要更新。

【解决方案2】：

将 sf 传递到您的函数中，例如：

<tr ng-repeat="sf in selectedFacture" ng-dblclick="editFacture(sf);" >
    <td><input class="fcls_crt" ng-model="sf.fcls_crt" type="text"/ </td>

将其作为参数添加到函数中，然后通过函数中的参数引用属性。

$scope.editFacture=function(){
    var editedQuanCls=sf.fcls_crt;
    ...
}

另外，请参阅此问题："Thinking in AngularJS" if I have a jQuery background?

【讨论】：

等待我更改了输入字段的值，但它不起作用！我想获得新的价值，这是让我获得旧的价值！
是的，我实际上错过了您手动设置值。您还需要使用 ng-model 才能正确绑定。
已更新以反映这一点。