AngularJS - ng-repeat - using parent repeat data in child http request

Question

I have what would seem to be a simple problem with AngularJS - apologies if so. I'm new and have searched all over and can't quite find an answer to what I want to do.

Basically I have a $http request that is getting a list of 'Cards' from a server which I'm then using ng-repeat to build in the HTML. I then want to populate those Cards with a number of 'Metrics' - also retrieved from the server. I have a controller for the 'Cards' (parents) and a separate controller for the 'Metrics' (children).

My issue is that I can't work out how to reference the ID of the parent 'Card' when making the child $http request.

Below is the HTML & JS that I am using - any help would be appriciated:

---

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');
        });

    }]);

})();

---

Thank you!

Answer 1

EDIT 1

Use a service for shared variable between controllers. Look the example:

   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;
            }
        };
    });

EDIT 2

When working with angularjs is recomended use a one object for print object in table. Why this is a beautiful s2.

Look this example. To help you in development. Use the sample function pass the parentId in load(CardId). This function will run in the page load.

I too fix code html. You used the alias controller before input field of same.

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>