Повторяющиеся данные в строке таблицы, угловые

Question

Почему я получаю одинаковое значение во всех строках таблицы. В таблице есть строки, и при щелчке по строке открывается другая строка с дополнительной информацией, и каждая строка содержит те же данные, что и последняя нажатая строка. Возможно, это потому, что я сохраняю данные в одном и том же объекте, но я действительно не знаю, как это решить. Я получаю данные из файлов JSON с фактором, так что вы не запутаетесь, откуда поступают мои данные. Вот код Большое спасибо.

    '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>

Answer 1

Согласно вашему описанию, я предполагаю, что ваши пользователи, дочерние массивы, такие как

  $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"}
  ];

Сначала вам нужно сопоставить дочерние элементы с пользователями

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

Теперь вы можете достичь своей цели

<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>

Это работает JSFiddle