获取由 ng-repeat | 填充的输入的编辑值Angular js
get the edited values of an inputs filled by ng-repeat | Angular js
在我看来,用户双击一行,详细信息将弹出,输入已被 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 的值,我应该添加什么以获得所有值?非常感谢
将 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?
已重构您的代码。
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>
在我看来,用户双击一行,详细信息将弹出,输入已被 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 的值,我应该添加什么以获得所有值?非常感谢
将 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?
已重构您的代码。
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>