Question

我正在尝试构建一个具有多层深度嵌套组的组列表。这些组可以包含网络设备列表。

问题是，我无法弄清楚为什么它不会让我崩溃的团体。当我不使用崩溃时，一切都会出现，所以所有的数据都在运行。这是html。

<div class="container" style="width:100%" ng-app="MyApp">
<div ng-controller="GroupsController" ng-class="dropdown">
    Tree List of Groups

    <script type="text/ng-template" id="tree-structure">

        <span class="glyphicon glyphicon-chevron-up collapsible">
            {{dt.GroupName}}
        </span>

        <ul ng-if="dt.AddMembers" >
            <li>Device Count: {{dt.DeviceCount}}</li>
            <li>Total Ports: {{dt.TotalPortCount}}</li>
            <li>Open Ports: {{dt.OpenPortCount}}</li>
            <li>Reserved Ports: {{dt.ReservedPortCount}}</li>
            <li>Percent Used: {{dt.PercentUsed}}</li>
        </ul>
        <ul style="list-style: none">
            <li ng-repeat="dt in dt.SubGroup" ng-include="'tree-structure'"  ng-show="dt.active"  ng-click="showChilds(dt)">
            </li>
        </ul>

    </script>




    <ul style="list-style: none"  ng-class="list-group-item" >
        <li ng-repeat="dt in GroupList" ng-include="'tree-structure'" style="list-style: none" ng-click="showChilds(dt)">

        </li>
    </ul>
</div>

这是控制器文件

var MyApp = angular.module('MyApp', ['ui.bootstrap']);
MyApp.controller('GroupsController', ['GroupsService', '$scope', '$log', '$uibModal',
function (GroupsService, $scope, $log, $uibModal) {
    $scope.isCollapsed = false;
    // Populate Jobs
    GroupsService.GetDeviceList().then(function (d) {
        $scope.GroupList = d.data;
    }, function (error) {
        alert('Error!');
    });
    $scope.showChilds = function (item) {
        item.active = !item.active;
    };

}])

我尝试过不同的路线，使用下面的javascript来获取课程（dropdown li＆gt; ul）以展开和折叠。我已经尝试过javascript来获取元素id，但是没有用。我试过在

中包装字形

 <a> </a> and using ng-click.

我回去尝试以角度来做，但没有运气。任何帮助表示赞赏或建议其他方法来实现这一目标。

编辑 - 我取得了一些进展。它仍然没有按照我希望的方式运行，但它确实崩溃并且现在已经足够了。我仍然感谢任何使代码更好的建议。这可能有助于其他人。

这是最新版本

HTML CODE

<div class="container" style="width:100%" ng-app="MyApp">
<div ng-controller="GroupsController" ng-class="dropdown">
    Tree List of Groups

    <script type="text/ng-template" id="tree-structure">

        <span ng-class="{'glyphicon glyphicon-chevron-up collapsible':(!dt.AddMembers), 'childElement':(dt.AddMembers)}" ng-click="showChilds(dt)">
            {{dt.GroupName}}
        </span>

        <ul ng-if="dt.AddMembers">
            <li>Device Count: {{dt.DeviceCount}}</li>
            <li>Total Ports: {{dt.TotalPortCount}}</li>
            <li>Open Ports: {{dt.OpenPortCount}}</li>
            <li>Reserved Ports: {{dt.ReservedPortCount}}</li>
            <li>Percent Used: {{dt.PercentUsed}}</li>

        </ul>
        <ul style="list-style: none" ng-show="dt.active" class="childElement">
            <li ng-repeat="dt in dt.SubGroup" ng-include="'tree-structure'">

            </li>
        </ul>

    </script>




    <ul style="list-style: none" ng-class="list-group-item" class="parentList">
        <li ng-repeat="dt in GroupList" ng-include="'tree-structure'" style="list-style: none">

        </li>
    </ul>
</div>

控制器代码

MyApp.controller('GroupsController', ['GroupsService', '$scope', '$log', '$uibModal',
function (GroupsService, $scope, $log, $uibModal) {
    $scope.location = '';
    $scope.groupguid = '';
    $scope.isCollapsed = false;
    // Populate Jobs
    GroupsService.GetDeviceList().then(function (d) {
        $scope.GroupList = d.data;
        console.log(d.data)
    }, function (error) {
        alert('Error!');
    });
    $scope.showChilds = function (item) {
        //$scope.grouplist = [];
        item.active = !item.active;
        console.log("here item=" + item.GroupName + " active=" + item.GroupName.active);
        //grouplist = item.SubGroup;
        //angular.forEach(item.SubGroup, function (group) {
         //   group.active = !group.active;
          //  console.log("item=" + group.GroupName + " active=" + group.active);
        });
    };

}])

angularjs动态列表折叠问题

0 个答案: