Question

我对AngularJS似乎是一个简单的问题 - 如果是这样的道歉。我是新人，已经搜遍过，无法找到我想要做的答案。

基本上我有一个$ http请求，它会获得一张＆＃39;卡片列表。从我使用ng-repeat构建HTML的服务器。然后，我想用一些“指标”来填充这些卡片。 - 也从服务器检索。我有一个控制器用于卡片＆＃39; （父母）和“度量标准”的单独控制者。（儿童）。

我的问题是，我无法确定如何引用父母的ID＆＃39;＆＃39;在制作孩子$ http请求时。

以下是HTML＆amp;我正在使用的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时，在表格中使用一个对象作为打印对象。为什么这是一个美丽的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>

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

1 个答案: