Duplicate data in table's row, Angular

Question

Why am I getting same value in all rows of table. Table has rows and when row is clicked another row opens with additional information and every row contains same data like last clicked row. Probably it is cos I am saving data in same object, but I really don't know how to solve it. I am getting data from json files with factor, so you don't get confused, where my data is coming from. Here is the code. Thank you very much.

    'use strict';

angular.module('sbAdminApp')
    .controller('TreeTableCtrl', TreeTableCtrl);

function TreeTableCtrl($scope, $http, factor) {
    
    $scope.nonCollapsedUser = [];

 var getUsers = function () {
            factor.getUse().then(function (response) {
                $scope.users = response.data;
            });
        };
        getUsers();
        var getUsersInfo = function () {
            factor.getChi().then(function (response) {
                $scope.child = response.data;
                console.log($scope.child);

            });
        };


        getUsersInfo();

        $scope.togglePerson = function (index) {
            $scope.nonCollapsedUser.push(index);
            $scope.newObj=$scope.child[index];
            console.log($scope.newObj);
        };


        $scope.hidePerson = function (index)
        {
            for(var i=0; i<$scope.nonCollapsedUser.length; i++){
                if($scope.nonCollapsedUser[i] === index){
                    $scope.nonCollapsedUser.splice(i, 1);
                }
            }
        };


}

<div class="panel panel-default" style="background: #fcf8e3">
    <div class="panel-body">
        <table st-safe-src="leads" class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Last Name</th>
            </tr>
            </thead>
            <tbody ng-repeat="user in users track by $index">
            <tr>
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.lastName}}</td>
                <td>
                    <button ng-if="nonCollapsedUser.indexOf($index) == -1" class="btn" ng-click="togglePerson($index)">
                        <i class="fa fa-arrow-down"></i></button>
                    <button ng-if="nonCollapsedUser | contains:$index" class="btn" ng-click="hidePerson($index)"><i
                            class="fa fa-arrow-up"></i></button>
                </td>
            </tr>

            <tr ng-if="nonCollapsedUser | contains:$index">
                <div>
                    <td>{{newObj.address}}</td>
                    <td>{{newObj.mobNumb}}</td>
                </div>
            </tr>
        </table>
        </td>
        </tr>
        </tbody>
        </table>
    </div>
</div>

You are overrding your $scope.newObj each time you call togglePerson, and each non collapsed row will show the last $scope.newObj created this way. You could for example store the data in the user object — Guillaume Ruchot
– Guillaume Ruchot, Commented May 17, 2018 at 9:17
If you want to show multiple rows with additional information, you need to store data in the user object. If you want to only one row with additional information, you need to close previous open row. Because you use the same newObj. — Dushyantha
– Dushyantha, Commented May 17, 2018 at 10:25
@Dushyantha I want to show multiple rows with additional information in same time. Can you tell me exactly which data in which row please, I am new in Angular — Ivan Luketić
– Ivan Luketić, Commented May 17, 2018 at 11:23

Dushyantha · Accepted Answer · 2018-05-17 15:50:27Z

According to your description, I assume your users, child arrays like this

  $scope.users =[
  {"id":1,"name":"Mirko","lastName":"Spriko"},
  {"id":2,"name":"Pero","lastName":"Peric"},
  {"id":3,"name":"Marko","lastName":"Prezime"}
  ];

  $scope.child =[
  {"address":"Address1","mobNumb":"47423756324"},
  {"address":"Address2","mobNumb":"73454635545"},
  {"address":"Address3","mobNumb":"87464343648"}
  ];

First you need to map child to users

  angular.forEach($scope.users, function(value,key){
      value.child =$scope.child[key];
  });

Now you can achive your target

<table st-safe-src="leads" class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Last Name</th>
                <th></th>
            </tr>
            </thead>
            <tbody  ng-repeat="user in users" >
            <tr>
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.lastName}}</td>
                 <td>
                    <button ng-show="nonCollapsedUser.indexOf($index) == -1" class="btn" ng-click="togglePerson($index)">
                        <i class="fa fa-arrow-down"></i>veiw</button>
                    <button ng-show="nonCollapsedUser.indexOf($index) > -1" class="btn" ng-click="hidePerson($index)"><i
                            class="fa fa-arrow-up"></i>hide</button>
                </td>

            </tr>
            <tr ng-show="nonCollapsedUser.indexOf($index) > -1">
                    <td></td>
                    <td>{{user.child.address}}</td>
                    <td>{{user.child.mobNumb}}</td>
                    <td

            </tr>

        </table>

This is working JSFiddle

Collectives™ on Stack Overflow

Duplicate data in table's row, Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related