AngularJS:ng-repeat 与动态数据 [英] AngularJS: ng-repeat with dynamic data

问题描述

我正在构建一个简单的 AngularJS 应用程序，但我无法解决有关服务、ng-repeat 和动态添加数据的问题.

我想做什么

我的页面被分成几个计数器.在 homeController 中，我有一个文本字段和一个按钮.当我按下按钮时，我正在对服务器进行 API 调用，服务器返回 JSON，我将数据设置为 Storage 服务.在这部分一切正常 - 服务器按原样返回数据，并将数据设置为服务，我在存储服务中获取 console.log('Data set!'); .在第二个控制器( slidesController )中，我有一个 ng-repeat

<div ng-repeat="当前段落">测试

正如您在下面的代码中看到的，paragraphs 绑定到 slidesCtrl

中的 Storage.data 值

因此，当用户在框中输入内容并按下按钮 (homeCtrl) 时，服务器应将返回的数据传递给 Storage 服务并使用 ng-repeat (slideCtrl) 呈现数据.例如，如果我使用 [2, 3, 4, 5] 对存储服务器中的数据进行硬编码，则一切正常(由于 ng-repeat，我进行了 4 次测试)，但是如果数据是通过 api 调用获取的，ng-repeat 不起作用.

代码

App.controller('homeCtrl', function ($scope, $http, Api) {...$scope.onprocess = 函数 () {$scope.loading = true;api(.....);}});App.controller('slidesCtrl', function ($scope, Storage) {$scope.paragraphs = Storage.data.paragraphs;//如果数据是动态添加的，则不起作用$scope.paragraphs = Storage.test;//如果数据是预定义的，一切都很好});App.factory('Api', function ($http, Storage) {返回函数(数据){$http.post('/api', {网址:data.url，分析:0}). 成功(功能(资源){....Storage.set(res);....}).错误(函数(){....});};});App.factory('存储', function () {无功输出 = {};var set = 函数(数据){输出 = 数据；console.log('数据集！');};返回 {设置:设置，数据:输出，测试:[1, 2, 3]};});

解决方案

我找到了

angular.copy(data, output);

作为解决方案.

您可以查看有关此主题的更多信息使用 AngularJS 服务在两个控制器之间共享动态数据

谢谢大家.

I'm building a simple AngularJS app, but I couldn't solve a problem regarding services, ng-repeat and dynamically added data.

What I'm trying to do

My page is splitted into few countrollers. In the homeController I have a text field and a button. When I press the button I'm doing an API call to the server, the server returns JSON and I'm setting the data to Storage service. In this part everything is OK - The server returns data as it should and the data is setted to the service and I'm getting console.log('Data set!'); in the Storage service. In the second controller ( slidesController ) I'm having a ng-repeat

<div ng-controller="slidesCtrl">
    <div ng-repeat="current in paragraphs"> test </div>
</div>

And as you can see in my code below, paragraphs is binded to Storage.data value in slidesCtrl

So, when a user enter something in the box and press the button (homeCtrl), the server should pass the returned data to Storage service and render the data using ng-repeat (slideCtrl). If I hardcode the data in Storage server with [2, 3, 4, 5] for example, everything is ok ( I'm getting test 4 times, because of ng-repeat ), but if the data is taken with api call, ng-repeat isn't working.

Code

App.controller('homeCtrl', function ($scope, $http, Api) {...

    $scope.onprocess = function () {
        $scope.loading = true;

        Api(.....);
    }
});

App.controller('slidesCtrl', function ($scope, Storage) {


    $scope.paragraphs = Storage.data.paragraphs; // NOT WORKING IF DATA IS DYNAMICALLY ADDED

    $scope.paragraphs = Storage.test; // IF DATA IS PREDEFINED EVERYTHING IS FINE


});

App.factory('Api', function ($http, Storage) {
    return function (data) {
        $http.post('/api', {
            url: data.url,
            analyze: 0
        }).success(function (res) {....
            Storage.set(res);....
        }).error(function () {....
        });
    };
});

App.factory('Storage', function () {
    var output = {};

    var set = function (data) {
        output = data;
        console.log('Data set!');
    };

    return {
        set: set,
        data: output,
        test: [1, 2, 3]
    };
});

解决方案

I found

angular.copy(data, output);

as solution.

You can see more information on this topic Sharing dynamic data between two controllers with service AngularJS

Thanks to everyone.

这篇关于AngularJS:ng-repeat 与动态数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！