Angularjs permits update of a single(first) row for sub comments of each post

fredrick esedo

unread,

Jun 12, 2018, 2:20:47 AM6/12/18

to Angular and AngularJS discussion

I have a json file which contains two posts. The First Post contains three subposts(subcomment) each with an update button.

The second post contains two subpost(subcomment) each with an update button.

My intention was to allow user to input any values corresponding to each rows under each post so the new inputed data will

replace the already existing data in the angular js view for that row.

The problem is that only the first row of each subcomment for that post gets updated when data is posted.

For instance in post 1, If you enter a value at the first row and submit, it will update the already existing

{{comment.subcomment}} data of the first row. but If you input on row 2 for the same post 1,

it will update the first row of post 1 instead of second row of that post etc.

The work around solution was that since the code has 2 ng-repeats and $index passes the index of the

inner ng-repeat whereas one need the index of the outer ng-repeat like in the case of code below.

1) First add this ng-init to your outer ng-repeat

<div ng-repeat='post in posts track by $index' ng-init="outerIndex=$index">.

2) use outerIndex in your save function


<input type='button' id='but_save' value='Save and Replace/Update' ng-click='setResponse4(post.id,1,outerIndex,subcomment,comment.id)'>

But the solution above only updates first inputed values of the of the first subcomment row for each post.

but if you input on row 2 for the same post, it will update the first row of that post instead of second row of that post for which the button was clicked.

below is the code

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angul...@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script >


var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.posts = [
        {
            "id": "1",
            "title": "my first post title.",
            "comment": [
                {
                    "subcomment": "post 1 subcomment 1", "status": "**working**"
                },

{
                    "subcomment": "post 1 subcomment 2" , "status": "**Not working**"
                },

{
                    "subcomment": "post 1 sub comment 3",  "status": "**Not working**"
                }


            ]
        },

   {
            "id": "2",
            "title": "my second post title.",
            "comment": [
                {
                    "subcomment": "post 2 subcomment 1", "status": "**working**"
                },

{
                    "subcomment": "post 2 subcomment 2" ,  "status": "**Not working**"
                }


            ]
        }






    ];


    $scope.setResponse4 = function (postid, type, index, subcomment, commentid) {
        var subcomment = subcomment;
        $scope.posts[index].comment[0].subcomment = subcomment;
    }
});
</script>

<body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <div ng-repeat='post in posts track by $index' ng-init="outerIndex=$index">

<h3><b>Post ID: {{ post.id }}</b></h3>
        <b>Post Title:</b> {{ post.title }}
        <div ng-repeat="comment in post.comment ">
            <br>
            <b>sub comment</b>: {{comment.subcomment}},  
 <b>status</b>: {{comment.status}}, 
            <div>
                <table>
                    <tr>
                        <tr>
                            <td>Enter subcomment</td>
                            <td>
                                <input type='text' ng-model='subcomment' placeholder="Enter Value For subcomment and Save.">
                            </td>
                        </tr>
                        <tr>
                            <td>
                              {{outerIndex}}
                            </td>
                            <td>
                                <input type='button' id='but_save' value='Save and Replace/Update' ng-click='setResponse4(post.id,1,outerIndex,subcomment,comment.id)'>
                            </td>
                            <td>
                                <input type='button' style="display:none" ng-init='getComments1(comment.id,5)'>
                            </td>
                        </tr>
                </table>
            </div>
        </div>
        <hr style="width:100%;font-size:10">
    </div>
  </body>
</html>

Sander Elias

unread,

Jun 12, 2018, 11:43:26 AM6/12/18

to Angular and AngularJS discussion

Hi Fredrick,

Can you please post a plunker/stackblitz or something like that, that will make it so much easier to help you.

Regards

Sander

fredrick esedo

unread,

Jun 13, 2018, 12:39:43 AM6/13/18

to Angular and AngularJS discussion

Its working now Sir Sander, I have a typo error some where. Thanks

Reply all

Reply to author

Forward