Ok. Dieser hat mich wirklich ratlos gemacht. Hier ist, was ich versuche zu bauen.angularjs 2 Datenquellen mit 1 Controller?
Ich habe eine Tabelle. In der ersten <tr> Ich habe es Daten zu wiederholen, und die letzte <td> hat eine Taste. Wenn ich auf diese Schaltfläche klicke, möchte ich unter jedem wiederholten <td>-Tag eine Reihe versteckter Zeilen anzeigen. In diesen versteckten Zeilen möchte ich mehr Daten aufrufen.
Ich benutze mysqli und php, um die Daten auf der DB in json zu kodieren, die ich dann in die Zellen auffüllen. Ich kann das alles mit 1 Controller machen. Wenn ich jedoch Daten aus einer anderen Quelle abrufen möchte, um die versteckten Zellen zu füllen, muss ich einen anderen Controller erstellen. Hier
ist die Basiscode: (verzeihen Sie das Inline-CSS, ist es einfacher für mich in externe CSS formatiert werden nach seiner funktionalen)
<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>
Die zweite Tabelle ist nur so, dass ich testen konnte und stellen Sie sicher, es zieht Daten richtig ein. (Stellt sich heraus, es war nicht, wie ich in UTF-8-codieren HAD)
SO TLDR:
Steuerung 1 zieht in Hauptdaten, auffüllt Zellen. Klicken Sie auf die Schaltfläche in einer Zelle und es werden darunter verborgene Zellen mit Controller-2-Daten angezeigt.
Probleme, die ich habe: Abgleich der sekundären Daten mit der ng-Wiederholung der primären Daten unter Verwendung beider Datenquellen in einem Controller-Bereich.
Bild für Sehhilfe:
Erstellen Sie einen Service mit beiden Data Loadern: https://docs.angularjs.org/guide/services –
Sie benötigen nicht mehr Controller. Sie benötigen dazu einen Service. – Makoto
Ich stimme zu, dass ein Service hier ist, was dies möglich machen wird. –