get the edited values of an inputs filled by ng-repeat | Angular js

Question

In my view, the user double click on a row and the details will pop up with input have been filled up by ng-repeat, the user could change the values, but my problem is that i can't get the new value of the input.

My view:

/* 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);

 }

My problem is that the function is only returning the values of the first tr in the ng-repeat, what should i add to get all values? many thanks in advance

Stop using jQuery for things that angular does much simpler. Shouldn't be using dom code in controllers — charlietfl, Jan 04 '18 at 13:47
please can you give me example ? i am very new to angular js and this is my first angular project, i tried to add ng-model but the values of the input changed to the value of ng-model — Ali, Jan 04 '18 at 13:49

Mike Feltman · Answer 1 · 2018-01-04T13:53:22.597

1

Pass sf into your function like:

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

Add it as a param to your function, then reference the properties via the parameter in your function.

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

Also, see this question: "Thinking in AngularJS" if I have a jQuery background?

edited Jan 04 '18 at 13:53

answered Jan 04 '18 at 13:32

Mike Feltman

5,160
1
17
38

wait i changed the value of the input fields, but it doesn't work! i want to get the new value, this is getting me the old values! – Ali Jan 04 '18 at 13:48
Yes, I actually missed that you were setting value by hand. You need to use ng-model as well to bind properly. – Mike Feltman Jan 04 '18 at 13:50
Updated to reflect that. – Mike Feltman Jan 04 '18 at 13:53

score 1 · Accepted Answer · answered Jan 04 '18 at 13:47

Have refactored your code.

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>

Why are you loading angular 1.2.23 here? That's really old and has deprecated things in it. — Mike Feltman, Jan 04 '18 at 13:55
@MikeFeltman StackOverflow's Snippets allow you to automatically insert relevant scripts such as AngularJS. Their highest version is only 1.2.23, which is good enough to run the Snippet for testing purposes — Aleksey Solovey, Jan 04 '18 at 14:12
Thanks. That's good to know. That really needs to be updated though. — Mike Feltman, Jan 04 '18 at 14:13

get the edited values of an inputs filled by ng-repeat | Angular js

2 Answers2