Question

解释起来会很复杂，所以请耐心等待。

任务：在表格中重复json数据。（产品列表，最后一个单元格是一个按钮）。

问题：点击按钮后，产品下方会显示另一个重复的行列表（第二个数据重复，产品附件），但必须与产品匹配。

现在我可以得到第一部分了。我甚至可以重复第二部分和ng-click。但是，每个按钮重复相同的事情。我知道$ index可能在这里使用，我只是不明白如何。

那么我如何获得每个产品的配件，只显示点击产品按钮的时间？

示例：产品1有5个配件。产品2有1个配件。如果我单击产品1的按钮，则会在其下方显示5个附件。如果我单击产品2的按钮，则会在其下方显示1个附件。

代码：

  <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" ng-switch="test">
                    <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-start = "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" ng-click="showDetails = ! showDetails">Select</button></td>
                    </tr>
                    <tr ng-repeat-end ng-class="{ 'hidden': ! showDetails }" >
                        <!--<td style="vertical-align:middle;text-align:center;">{{getdata_2.sales_description}}</td>
                        <td style="vertical-align:middle;text-align:center;">{{getdata_2.list_price}}</td> -->
                        <td colspan="7" style="text-align:center;vertical-align:middle;">test 1</td>

                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>

控制器：

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


        ajaxServices.getProducts().success(function(data){
            $scope.getdata = data
        });

        secondaryServices.getProducts_2().success(function(data){
            $scope.getdata_2 = data
        });

}）;

服务：

 testApp.factory('ajaxServices', function($http){
return {
    getProducts: function(){
        return $http.get('angular_data.php', {data: {}})
    }
}
});

 testApp.factory('secondaryServices', function($http){
return {
    getProducts_2: function(){
        return $http.get('angular_data_2.php', {data: {}})
    }
}
});

原谅内联样式，在测试时对我来说更容易。

嵌套的ng-repeat与2个json数据源

0 个答案: