/ / AngularJS - powtórzenie ng - użycie danych powtórzeń rodzica w podrzędnym żądaniu http - angularjs, http, usługi wcf-data, ng-repeat, ng-controller

AngularJS - powtórzenie ng - użycie danych powtórzeń rodzica w podrzędnym żądaniu http - angularjs, http, usługi wcf-data, ng-repeat, ng-controller

Mam coś, co wydaje się być prostym problemem z AngularJS - przepraszam jeśli tak. Jestem nowy i przeszukałem wszystko i nie mogę znaleźć odpowiedzi na to, co chcę zrobić.

Zasadniczo mam żądanie $ http, które jest pobieranielistę "Kart" z serwera, który następnie używam do powtórzenia polecenia ng-repeat, a następnie chcę uzupełnić te karty o kilka "Metryk" - również pobranych z serwera. "Karty" (rodzice) i osobny kontroler dla "Metryki" (dzieci).

Mój problem polega na tym, że nie mogę się dowiedzieć, jak odwołać się do identyfikatora nadrzędnej "Karty" podczas tworzenia żądania child $ http.

Poniżej znajduje się kod HTML i JS, którego używam - każda pomoc byłaby przydatna:


HTML:

<div class="Dashboard container-fluid" ng-controller="DahsboardCardController as Dashboard">

<div ng-repeat="Card in Dashboard.DashboardCards">

<div class="DashboardCard card">
{{Card.CardDisplayName}}

<div class="DashboardCardBody" ng-controller="DahsboardMetricController as Metric">
<div ng-repeat="Metric in Metric.DashboardMetrics">
{{Metric.MetricDisplayName}}
</div>
</div>

</div>

</div>

JS:

(function () {
var app = angular.module("OtterDashboard", [ ]);

app.controller("DahsboardCardController", [ "$http", function($http) {

//Declare a varaible for the data
var DashboardCards = this;

//Set the varaiable to an empty array to receive the data
DashboardCards.DashboardCards = [ ];

$http({
//Request the data
method: "GET",
dataType: "jsonp",
url: "/api.svc/tbl_Card",
useDefaultXhrHeader: false,
headers: {"Content-type": "application/json"},
headers: {"Accept": "application/json;odata=light;q=1,application/json;odata=verbose;q=0.5"},
crossDomain: true,
}).then(function successCallback(data) {
//The data was sucessfully received, populate the variable with it
DashboardCards.DashboardCards = data.data.d.results;
}, function errorCallback(response) {
//There was an error
console.log("Card data could not be retrieved");
});

}]);

app.controller("DahsboardMetricController",  ["$http", function($http, Card) {

//Declare a varaible for the data
var DashboardMetrics = this;

//Set the varaiable to an empty array to receive the data
DashboardMetrics.DashboardMetrics = [ ];

$http({
//Request the data
method: "GET",
dataType: "jsonp",
url: "/api.svc/DashboardMetric?Card=%27" + **???reference to parent card ID???** + "%27",
useDefaultXhrHeader: false,
headers: {"Content-type": "application/json"},
headers: {"Accept": "application/json;odata=light;q=1,application/json;odata=verbose;q=0.5"},
crossDomain: true,
}).then(function successCallback(data) {
//The data was sucessfully received, populate the variable with it
DashboardMetrics.DashboardMetrics = data.data.d.results;
}, function errorCallback(response) {
//There was an error
console.log("Metric data could not be retrieved");
});

}]);

})();

Dziękuję Ci!

Odpowiedzi:

0 dla odpowiedzi № 1

EDYTUJ 1

Użyj usługi dla wspólnej zmiennej między kontrolerami. Zobacz przykład:

   app.controller("DahsboardCardController", ["$http", function($http, $sharedResource) {
var DashboardCards = this;
DashboardCards.DashboardCards = [ ];

$http({
method: "GET",
dataType: "jsonp",
url: "/api.svc/tbl_Card",
useDefaultXhrHeader: false,
headers: {"Content-type": "application/json"},
headers: {"Accept": "application/json;odata=light;q=1,application/json;odata=verbose;q=0.5"},
crossDomain: true,
}).then(function successCallback(data) {
DashboardCards.DashboardCards = data.data.d.results;
$sharedResource.set("id", "<pass id value>");

}, function errorCallback(response) {
console.log("Card data could not be retrieved");
});
}]);

app.controller("DahsboardMetricController",  ["$http", function($http, Card, $sharedResource) {
var DashboardMetrics = this;

DashboardMetrics.DashboardMetrics = [];

$http({
method: "GET",
dataType: "jsonp",
url: "/api.svc/DashboardMetric?Card=%27" + $sharedResource.get("id") + "%27",
useDefaultXhrHeader: false,
headers: {"Content-type": "application/json"},
headers: {"Accept": "application/json;odata=light;q=1,application/json;odata=verbose;q=0.5"},
crossDomain: true,
}).then(function successCallback(data) {
DashboardMetrics.DashboardMetrics = data.data.d.results;
}, function errorCallback(response) {
console.log("Metric data could not be retrieved");
});
}]);

app.factory("$sharedResource", function () {
var property = {};

return {
get: function (key) {
return property[key];
},
set: function(key, value) {
property[key] = value;
}
};
});

EDYTUJ 2

Podczas pracy z angularjs zaleca się użycie jednego obiektu dla obiektu drukowania w tabeli. Dlaczego to jest piękne s2.

Zobacz ten przykład. Aby pomóc w rozwoju. Użyj przykładowej funkcji przekazującej parentID w load (CardId). Ta funkcja uruchomi się podczas ładowania strony.

Ja też naprawiam kod html. Użyłeś kontrolera aliasów przed tym samym polem wejściowym.

var app = angular.module("App", []);

app.controller("DahsboardCardController", ["$scope", function($scope) {
$scope.DashboardCards = [{
CardId: "111",
CardDisplayName: "Card 1"
}, {
CardId: "222",
CardDisplayName: "Card 2"
}, {
CardId: "333",
CardDisplayName: "Card 3"
}];
}
]);

app.controller("DahsboardMetricController", ["$scope", function($scope) {
$scope.load = function(CardIdParent) {
console.log(CardIdParent);
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" class="Dashboard container-fluid" ng-controller="DahsboardCardController as Dashboard">
{{Dashboard.DashboardCards}}
<div ng-repeat="Card in DashboardCards">
<div class="DashboardCard card">
{{Card.CardDisplayName}}
<div class="DashboardCardBody" ng-controller="DahsboardMetricController as Metric"  ng-init="load(Card.CardId)">
This a id parent: {{Card.CardId}}
<div ng-repeat="MetricItem in DashboardMetrics">
{{MetricItem.MetricDisplayName}}
</div>
</div>
</div>
</div>
</div>