AngularJS - ng-repeat - 在子 http 请求中使用父重复数据

Question

我对 AngularJS 有一个看似简单的问题——如果是这样，我深表歉意。我是新手，已经到处搜索了，但找不到我想做的事情的答案。

基本上，我有一个 $http 请求，它从服务器获取“卡片”列表，然后我使用 ng-repeat 构建 HTML。然后我想用一些“指标”填充这些卡片——也从服务器检索。我有一个用于“卡片”（父母）的控制器和一个用于“指标”（孩子）的单独控制器。

我的问题是，在发出子 $http 请求时，我无法弄清楚如何引用父“卡”的 ID。

以下是我正在使用的 HTML 和 JS - 任何帮助都会得到帮助：

---

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

    }]);

})();

---

谢谢！

Answer 1

编辑 1

为控制器之间的共享变量使用服务。看例子：

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

编辑 2

推荐使用 angularjs 时，使用 one 对象作为表中的打印对象。为什么这是一个漂亮的 s2。

看看这个例子。为您的发展助一臂之力。使用示例函数在 load(CardId) 中传递 parentId。该函数将在页面加载时运行。

我也修复了代码 html。您在相同的输入字段之前使用了别名控制器。

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>