Fatal编程技术网
  • javascript/
  • Javascript 如何使用ng开关切换显示带有AngularJS的嵌套表？

Javascript 如何使用ng开关切换显示带有AngularJS的嵌套表？

javascript angularjs

Javascript 如何使用ng开关切换显示带有AngularJS的嵌套表？,javascript,angularjs,Javascript,Angularjs,我试图在AngularJS中使用ng开关来展开表列表中的一行，以在单击另一个表时显示该表（包含关于该列表项的更多详细信息） 但是，我在显示嵌套表时遇到问题。我注意到这个问题只发生在嵌套表上。如果我使用ng switch来扩展td而不是表，那么它将按预期工作 下面是一个JSFIDLE和我的代码来说明这个问题： html： <body ng-app="listAndDetails"> <div> <table class="table table-bordere

我试图在AngularJS中使用ng开关来展开表列表中的一行，以在单击另一个表时显示该表（包含关于该列表项的更多详细信息）

但是，我在显示嵌套表时遇到问题。我注意到这个问题只发生在嵌套表上。如果我使用ng switch来扩展td而不是表，那么它将按预期工作

下面是一个JSFIDLE和我的代码来说明这个问题：

html：

<body ng-app="listAndDetails">
<div>
    <table class="table table-bordered" ng-controller="ListAndOneDetailCtrl">
        <thead>
            <tr>
                <th>Name</th>
                <th>e-mail</th>
            </tr>
        </thead>
        <tbody ng-repeat="user in users" ng-click="toggleSelected()" ng-switch on="isSelected(user)">
        <tr>
            <td>{{user.name}}</td>
            <td>{{user.email}}</td>
        </tr>
        <tr ng-switch-when="true" class="light-gray">
            <table>
                <tr>
                    <td>Country</td>
                    <td>Address</td>
                    <td>Description</td>
                </tr>
                <tr>
                    <td>{{user.country}}</td>
                    <td>{{user.address}}</td>
                    <td>{{user.desc}}</td>
                </tr>
            </table>
        </tr>
        </tbody>
    </table>
</div>

<div ng-controller="ListAndManyDetailsCtrl">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>Name</th>
            <th>e-mail</th>
        </tr>
        </thead>
        <tbody ng-repeat="user in users" ng-controller="UserCtrl" ng-click="toggleSelected()" ng-switch on="isSelected()">
        <tr>
            <td>{{user.name}}</td>
            <td>{{user.email}}</td>
        </tr>
        <tr ng-switch-when="true" class="light-gray">
            <td>{{user.country}}</td>
            <td>{{user.address}}</td>
            <td>{{user.desc}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
顶部的div试图在单击列表项时显示嵌套表，但什么也没有发生

底部的div尝试在单击列表项时显示子td项，它完全按照预期工作

当我试图使用ng开关展开以显示嵌套表时，有人知道问题出在哪里吗？如何解决呢？

您的代码中有两个错误

首先

在控制器
列表和OneDetailCtrl
中，在
ng上单击
您没有功能
切换选定的

秒

在第一个带有controller
listandandetailctrl
的表中，嵌套表中没有标记
td

请参阅中的正确代码



angular.module（'listAndDetails'，[]）
.value（'用户'[
{姓名：'Damien'，电子邮件：'damien@domain.com，描述：'Damien详情请点击此处…'，国家：'US'，地址：'address1'}，
{姓名：'Alex'，电子邮件：'alex@domain.com'描述：'Alex详情请点击此处…'，国家：'UK'，地址：'address2'}
])
.controller（'ListAndOneDetailCtrl'，函数（$scope，users）{
$scope.users=用户；
$scope.selectUser=函数（用户）{
$scope.selectedUser=用户；
};
$scope.isSelected=函数（用户）{
返回$scope.selectedUser==用户；
};
})
.controller（'listandManydailsctrl'，函数（$scope，users）{
$scope.users=用户；
})
.controller（'UserCtrl'，函数（$scope）{
$scope.toggleSelected=函数（）{
$scope.selected=！$scope.selected；
};
$scope.isSelected=函数（用户）{
返回$scope.selected；
};
});


名称
电子邮件
{{user.name}
{{user.email}
国家
地址
描述
{{user.country}
{{user.address}
{{user.desc}}
名称
电子邮件
{{user.name}
{{user.email}
{{user.country}
{{user.address}
{{user.desc}}

有两个问题：


    

  • 您需要一个td部分来封装您的表








angular.module('listAndDetails', [])

  .value('users', [
    { name:'Damien', email:'damien@domain.com', desc:'Damien details go here...', country:'US', address:'address1'},
    { name:'Alex', email:'alex@domain.com', desc:'Alex details go here...', country:'UK', address:'address2'}
  ])

  .controller('ListAndOneDetailCtrl', function ($scope, users) {
    $scope.users = users;

    $scope.selectUser = function (user) {
      $scope.selectedUser = user;
    };

    $scope.isSelected = function (user) {
      return $scope.selectedUser === user;
    };
  })

  .controller('ListAndManyDetailsCtrl', function ($scope, users) {
    $scope.users = users;
  })

  .controller('UserCtrl', function ($scope) {

    $scope.toggleSelected = function () {
      $scope.selected = !$scope.selected;
    };

    $scope.isSelected = function (user) {
      return $scope.selected;
    };
  });