Question

确定。这个真让我难过。这是我想要建立的。

我有一张桌子。在第一个<tr>我有重复数据，最后一个<td>有一个按钮。当我单击此按钮时，我想在每个重复的<td>标记下面显示一组隐藏的行。在那些隐藏的行中，我想调用更多数据。

我使用mysqli和php将数据库中的数据编码为json，然后我将其填充到单元格中。我可以使用1个控制器完成所有这些操作。但是，如果我想从另一个源中提取数据，要填充到隐藏的单元格中，我必须创建另一个控制器。

这是基本代码:(原谅内联css，它更容易在功能后将其格式化为外部css）

            <script src="js/angular.min.js"></script>
    <script>
        var app = angular.module('testApp', []);

        app.controller('tableCtrl_1', function($scope, $http){
            getdata();
                function getdata(){
                    $http.post("angular_data.php").success(function(data){
                        $scope.getdata = data;
                    });
                };
            });

        app.controller('tableCtrl_2', function($scope, $http){
            getdata();
                function getdata(){
                    $http.post("angular_data_2.php").success(function(data){
                        $scope.getdata = data;
                    });
                }
            });
    </script>

</head>
<body>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12" style="padding:0px;">
                <table class="table table-bordered" ng-controller="tableCtrl_1">
                    <tr style="height:70px;background-color:#0C4791;">
                        <th style="text-align:center;color:white;vertical-align:middle;">Flexi Floor/Low Wall</th>
                        <th style="text-align:center;color:white;vertical-align:middle;">Cooling</th>
                        <th style="text-align:center;color:white;vertical-align:middle;">Heating</th>
                        <th style="text-align:center;color:white;vertical-align:middle;">Nominal Capacities(cooling/heating)</th>
                        <th style="text-align:center;color:white;vertical-align:middle;">Pipe Length</th>
                        <th style="text-align:center;color:white;vertical-align:middle;">List Price</th>
                        <th style="text-align:center;color:white;vertical-align:middle;">Quantity</th>
                    </tr>
                    <tr ng-repeat = "getdata in getdata | filter:'Flexi Floor/Low Wall':true">
                        <td style="vertical-align:middle;text-align:center;">{{getdata.model_no_from}} + {{getdata.model_no_to}}</td>
                        <td style="vertical-align:middle;text-align:center;">{{getdata.cooling}}</td>
                        <td style="vertical-align:middle;text-align:center;">{{getdata.heating}}</td>
                        <td style="vertical-align:middle;text-align:center;"><span style="color:blue">{{getdata.nominal_cooling}}</span><span style="color:red;">{{getdata.nominal_heating}}</span></td>
                        <td style="vertical-align:middle;text-align:center;">{{getdata.pipe_length}}</td>
                        <td style="vertical-align:middle;text-align:center;"><span style="font-weight:bold;">{{getdata.system_listPrice | currency: "£"}}</span></td>
                        <td style="vertical-align:middle;text-align:center;"><button class="btn btn-default btn-large btn-block">Select</button></td>
                    </tr>
                </table>

                <table class="table table-bordered" ng-controller="tableCtrl_2">
                    <tr ng-repeat ="getdata in getdata">
                        <td style="vertical-align:middle;text-align:center;"  colspan="7">{{getdata.sales_description}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

</body>

第二个表格是为了让我可以测试并确保它正确地提取数据。（事实证明它不是，因为我必须用utf-8编码）

SO TLDR：

控制器1拉入主数据，填充单元格。单击单元格中的按钮，它将在控制器2数据下方显示隐藏的单元格。

我遇到的问题：使用一个控制器区域中的两个数据源将辅助数据与主数据的ng-repeat匹配。

视觉辅助图像：

Image link

Answer 1

这是我处理来自MySql的关系数据的技术。使用过滤器中的角度构建来行进主视图。在MS访问中，它是主窗体和子窗体。对我来说，我使用slim框架来构建简单的API Slim

这是$ scope处理相关密钥。

  $scope.showDetail = function(saleId,saleDetails){
    $scope.dataDetails = $filter('filter')(saleDetails,{main_id:saleId},true);
  }

查看Plunker 祝你好运！

angularjs有1个控制器的2个数据源？

1 个答案: