Повторение тех же данных в строке

Question

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

'use strict';

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

function TreeTableCtrl($scope, $http, factor) {

  
    function example() {
        factor.getUse().then(function (response) {
            $scope.users = response.data;
            console.log($scope.users);
        });
    }
    example();
    $scope.togglePerson = function (index) {
        factor.getChi().then(function (response) {
            $scope.indx = index;
            $scope.child = response.data;
            console.log($scope.child);
            $scope.childPar = $scope.child[index];
            console.log($scope.childPar);
        });
    };
}

<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>
            <tr ng-repeat-start="user in users track by $index" ng-init="parentIndex=$index"
                ng-click="togglePerson($index); viewChild=!viewChild ">
                <td> {{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.lastName}}</td>
            </tr>
            <tr ng-show="viewChild" ng-hide="indx!=$index" >
                <td style="width: 450px">
                    <table class="table ">

                        <tbody>
                        <tr>
                            <th style="width: 200px">
                                Address
                            </th>
                            <td style="width: 200px">{{childPar.address}}</td>
                            <th style="width: 200px">
                                Number
                            </th>
                            <td style="width: 200px">{{childPar.mobNumb}}</td>
                        </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr ng-repeat-end></tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

Конечно, ожидается, что оно будет таким же, у вас есть только 1 свойство, которое обрабатывает дополнительную информацию, которая является $scope.childPar

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

Попробуйте это

function example() {
   factor.getUse().then(function (response) {
       //Remap the model, [data] -> user, [otherInfo] -> other info
       var users = response.data.map(function(value) { 
                       return { data: value, otherInfo: null }
                     });
       $scope.users = users;
       console.log($scope.users);
    });
}
example();
$scope.togglePerson = function (index) {
     factor.getChi().then(function (response) {
         $scope.indx = index;
         $scope.child = response.data;
         console.log($scope.child);
         //Populate the otherInfo from the response
         $scope.users[index].otherInfo = response.data;
         console.log($scope.childPar);
      });
};

HTML

<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>
            <tr ng-repeat-start="user in users track by $index" ng-init="parentIndex=$index"
                ng-click="togglePerson($index); viewChild=!viewChild ">
                <td> {{user.data.id}}</td>
                <td>{{user.data.name}}</td>
                <td>{{user.data.lastName}}</td>
            </tr>
            <tr ng-show="viewChild" ng-hide="indx!=$index" >
                <td style="width: 450px">
                    <table class="table ">

                        <tbody>
                        <tr>
                            <th style="width: 200px">
                                Address
                            </th>
                            <td style="width: 200px">{{user.otherInfo.address}}</td>
                            <th style="width: 200px">
                                Number
                            </th>
                            <td style="width: 200px">{{user.otherInfo.mobNumb}}</td>
                        </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr ng-repeat-end></tr>
            </tbody>
        </table>
    </div>
</div>