угловые 2 источника данных с 1 контроллером?

Хорошо. На самом деле это меня сильно озадачило. Вот что я пытаюсь построить.угловые 2 источника данных с 1 контроллером?

У меня есть стол. В первом <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)

ТАК TLDR:

контроллер 1 тянет в основных данных, заполнит клетки. Нажмите кнопку в ячейке, и она отобразит скрытые ячейки под данными контроллера 2.

Проблемы, которые возникают у меня: сопоставление вторичных данных с ng-повторением первичных данных с использованием обоих источников данных в одной области контроллера.

изображение для визуальной помощи:

Image link

источник

2016-04-05 Josh Winters

создать сервис с обоими загрузчиками данных: https://docs.angularjs.org/guide/services –

Вам не нужно больше контроллеров. Для этого вам нужна служба. – Makoto

Я согласен с тем, что услуга вот что сделает это. –

Это мой метод работы с реляционными данными из MySql. Использование угловой сборки в фильтре для перехода к главному виду. В доступе MS это основная форма и подчиненная форма. для меня я использую slim framework для создания простого API. Slim

Вот ручка $ scope связанного ключа.

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

взгляд на Plunker Удачи!

источник

2016-04-06 05:38:18 praHoc

угловые 2 источника данных с 1 контроллером?

ответ

Смежные вопросы