javascript - 表行中的重复数据，Angular

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

首先你需要将 child 映射到用户

  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