2016-04-05 15 views
0

Tamam. Bu gerçekten beni güldürdü. İşte yapmaya çalıştığım şey bu.angularjs 1 kontrol cihazı ile 2 veri kaynağı?

Bir masam var. İlk <tr>'da verileri tekrar ediyorum ve son <td> bir düğmeye sahip. Bu düğmeye tıkladığımda, tekrarlanan her bir <td> etiketinin altında gizli satırlar kümesi göstermek istiyorum. Bu gizli satırlarda daha fazla veri aramak istiyorum.

DB'deki verileri kodlamak için mysqli ve php kullanıyorum. Bunların hepsini 1 kontrol cihazı ile yapabilirim. Ancak, başka bir kaynaktan veri almak, gizli hücrelere nüfuz etmek istersem, başka bir kontrolör yapmak zorundayım. (Fonksiyonel sonra dış css içine beni biçimlendirmek için onun daha kolay inline css, af) Ben test etmek ve emin Böylece sadece

  <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> 

ikinci tablodur: Burada

baz kodudur Verileri düzgün bir şekilde çekiyor.

SO TLDR (UTF-8 kodlamak zorunda gibi değildi çıkıyor): Ana veri 1 çeker

kontrol, hücreleri doldurur. Bir hücrede düğmesine tıklayın ve kontrolör 2 verileriyle altındaki gizli hücreleri gösterecektir.

Sorunlarım: Ikincil verileri, bir denetleyici alanındaki her iki veri kaynağını kullanarak, birincil verinin ng-yinele ile eşleştirilmesi. Görsel yardım için

resim:

Image link

+2

Her iki veri yükleyiciyle de bir hizmet oluşturun: https://docs.angularjs.org/guide/services –

+1

Daha fazla denetleyiciye ihtiyacınız yok. Bunu halletmek için bir servise ihtiyacınız var. – Makoto

+0

Burada bir hizmetin bunun gerçekleşmesini sağlayacak olduğunu kabul ediyorum. –

cevap

0

Bu MySql den ilişkisel veri ile çalışan benim tekniktir. Ana görünümü ilerletmek için açısal yapıyı kullanarak. MS erişiminde ana form ve alt formdur. Benim için kolay API Slim

'u oluşturmak için ince bir çerçeve kullanıyorum İşte $ kapsamı ilgili anahtarı ele alıyor. Plunker İyi şanslar

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

bak!