Post
Ask Question
michael neo

michael neo

  • NA
  • 10
  • 1.3k

Angularjs allows data updates only for the first row

Jun 10 2018 3:49 PM
I have a code that displays three rows of information from json using angularjs.
 
Now I want if any values entered in the form inputs corresponding to that rows to replace the already existing values in the view for that rows.
 
Eg. In row 1 , I have value hello sub 1 for subcomment Variable. Now I want if I enter another values say New sub 1 in the form inputs on that, it will replace/updates the already existing values in the angular view for that rows.
 
The problem with the code above is that it keeps on replacing/updating only the subcomment values of the first row each time a new subcomment is entered. irrespective of the save button that was clicked
 
You can run the script and see the problem. Try to enter a value in a form input at row 2 or 3 and click on save. Instead of the updates to appear on view on the corresponding rows for subcomment at 2 or 3, it will keep appearing on the first row on the view
 
below is the entire partially working code which keeps updating only the first row no matter which submit button that was clicked
  1. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  
  2. <body ng-app="test" ng-controller="testCtrl">  
  3. <div ng-repeat='post in posts'>  
  4. <h3>Row {{ post.id }} </h3>  
  5. <b>Post Title:</b> {{ post.title }}  
  6. <div ng-repeat='comment in post.comment'><br>  
  7. <b>sub comment</b>: {{comment.subcomment}} (<--New Subcomment appears)  
  8. <div>  
  9. <table>  
  10. <tr>  
  11. <tr>  
  12. <td>Enter subcomment</td>  
  13. <td><input type='text' ng-model='subcomment' placeholder="Enter Value For subcomment and Save."></td>  
  14. </tr>  
  15. <tr>  
  16. <td> </td>  
  17. <td><input type='button' id='but_save{{$index}}' value='Save and Replace/Update' ng-click='setResponse4(post.id,1,$index,subcomment,comment.id)' ></td>  
  18. <td><input type='button' style="display:none" ng-init='getComments1(comment.id,5)' ></td>  
  19. </tr>  
  20. </table>  
  21. </div>  
  22. </div>  
  23. <hr style="width:100%;font-size:10">  
  24. </div>  
  25. </body>  
  26. <script>  
  27. var app = angular.module('test', []);  
  28. app.controller('testCtrl', ['$scope', '$http', function ($scope, $http) {  
  29. //var app = angular.module('test',[]);  
  30. //app.controller('testCtrl',function($scope,$http){  
  31. $scope.posts = [  
  32. {  
  33. "id": "1",  
  34. "title": "my first title.",  
  35. "comment": [  
  36. {  
  37. "subcomment": "Hello sub 1"  
  38. }  
  39. ]  
  40. },  
  41. {  
  42. "id": "2",  
  43. "title": "my second title.",  
  44. "comment": [  
  45. {  
  46. "subcomment": "Hello sub 2"  
  47. }  
  48. ]  
  49. },  
  50. {  
  51. "id": "3",  
  52. "title": "my third title.",  
  53. "comment": [  
  54. {  
  55. "subcomment": "Hello sub 3"  
  56. }  
  57. ]  
  58. }  
  59. ];  
  60. $scope.comment=[];  
  61. //initialize an arrays of comments  
  62. $scope.setResponse4 = function(postid,type,index,subcomment,commentid){  
  63. angular.forEach($scope.posts[index].comment, function(value, key){  
  64. value.subcomment = subcomment;  
  65. //alert(value.subcomment);  
  66. });  
  67. //var subcomment=subcomment;  
  68. //$scope.posts[index].comment = subcomment;  
  69. }  
  70. }  
  71. ]);  
  72. </script>