使用 AngularJs 和 MVC 在 Accordion 中分组数据和显示答案

【问题标题】：Group Data and Display in Accordion using AngularJs and MVC使用 AngularJs 和 MVC 在 Accordion 中分组数据和显示
【发布时间】：2014-09-10 19:32:07
【问题描述】：

我是 MVC 和 AngularJs 的新手，并且已经为此辛勤工作了好几天。虽然感觉自己越来越近了……还是没有雪茄。

问题：我有一个按报告类型（名称）分组的报告列表。我正在尝试使用手风琴来显示和隐藏每个组中的报告列表。

我的controller.js长这样（我知道错了）：

window.app.controller('relatedReportsController', ['$scope', '$timeout', 'relatedReportsService',
function ($scope, $timeout, relatedReportService) {
    initialize();
    function initialize()
    {
        $scope.relatedReports = [];
        $scope.rollupVisible = false;
    }
    function sortOn(collection, name)
    {
        collection.sort(
            function (a, b) {
                if (a[name] <= b[name]) {
                    return (-1);
                }
                return (1);
            });
    }
    $scope.groupBy = function (attribute) {
        $scope.Groups = [];
        sortOn($scope.relatedReports, attribute);
        for (var i=0; i< $scope.relatedReports.length; i++)
        {
            var report = $scope.relatedReports[i];
        }
    }
    $scope.toggleRollup = function($event)
    {
        if (angular.element($event.targe).hasClass('glyph')) return;
        relatedReportService.$promise.then(function (data) {
            $scope.relatedReports = data;
        })

    }
    }]);

我的页面如下所示：

                <li class="fruitRollup header row" ng-controller="relatedReportsController">
                <div class="suitcaseheader">
                    <span class="col-xs-10 zero firstlabel">{{group.Name}}</span>
                    <span class="col-xs-3 zero datepad">Date</span>
                    <span class="floatR2">View</span>
                    <span class="clear"></span>
                </div>
                <div class="eaten">
                     <ul class="data">
                        @*@foreach (var reportResult in resultGroup.OrderByDescending(r=>r.Date))
                        {*@
                            <li class="data row" ng-repeat="report in group.reports" ng-controller="relatedReportsController">
                                <div class="suitcase">
                                    <span class="col-xs-10 zero accountNumberColumn"></span>
                                    @*<span class="middle zero">@reportResult.Date.Replace("12:00:00","")</span>*@
                                    <span class="middle zero">{{report.Date}}</span>
                                    <span class="floatR2">
                                        <a class="icon-view glyph" target="_blank" href="@Url.ActionEncodedParameters("ViewDocument", "DocumentSearch", new { id = reportResult.Id })"></a>
                                    </span>
                                    <span class="clear"></span>
                                </div>

如您所见，我需要很多帮助。提前致谢！

【问题讨论】：

您看到错误了吗？它是否编译成功，但您没有得到所需的输出？这里的问题到底是什么？您是否查看过是否正在调用您的控制器以及某处是否发生了 javascript 错误？

标签： javascript jquery asp.net-mvc angularjs

【解决方案1】：

我在 controller.js 中编写的代码没有正确获取数据。在尝试使用我在互联网上找到的样本组合时，我完全糊涂了。我昨天想通了。我不需要通过 controller.js 获取数据，因为数据已经通过我的页面 controller.cs 和 viewmodel 获取。我最终只需要使用 ng-show 来显示和隐藏这些部分。

感谢您抽出宝贵时间提供帮助。

【讨论】：