如何将AJAX转换为角度js并为数组的每个元素重复代码块？

I want create a system where a section of code from an external text file is imported and repeated using angular js. The code needs to run through a number of text files and create a new section for each I have been attempting to rewrite my ajax code from a previous problem in angular js and I cannot seem to find a way to make it work. That problem can be found here: Calling angularjs inside.

我想创建一个系统,其中导入外部文本文件的一部分代码并使用角度js重复。代码需要运行一些文本文件并为每个我创建一个新的部分我试图从角度js中的先前问题重写我的ajax代码,我似乎无法找到使其工作的方法。这个问题可以在这里找到:在里面调用angularjs。

My old AJAX code:

我的旧AJAX代码:

$.ajax({
    url : '../src/text/section1.txt',
    dataType: 'text',
    success : function (data) {
        $('#section1').append(data);
    },
});

This is what I have currently:

这就是我目前所拥有的:

app.controller('sectionController', ['$scope', function($scope, $http) {
  $scope.sections = [
    {id: 1, title: 'Page 1', data: ''},
    {id: 2, title: 'Page 2', data: ''},
    {id: 3, title: 'Page 3', data: ''},
    {id: 4, title: 'Page 4', data: ''},
    {id: 5, title: 'Page 5', data: ''},];

  angular.forEach($scope.sections, function(id) {
    $http({
      url : '../../src/text/section' + $scope.sections.id +'.txt',
      dataType: 'text',
    }).success(function (data) {
      $scope.sections[id].data = data;
    });
  });
}]);

My HTML is:

我的HTML是:

<div class="body">
            <div class="bodyBackground"></div>
            <div class="contentContainer" ng-controller="sectionController">
                <div id="sectionContainer" ng-repeat="section in sections">
                    <div id="section{{ section.id }}">
                        <h3 class="sectionTitle">{{ section.title }}</h3>
                        <div>{{ section.data }}</div>
                    </div>
                </div>  
            </div>
        </div>

Thanks in Advance

提前致谢

1 个解决方案

#1

consider adding a 'data' property to your $scope.sections objects

考虑在$ scope.sections对象中添加'data'属性

$scope.sections = [
{id: 1, title: 'page 1', data: ''}
]

then in the success of your HTTP set the response data to the appropriate section object data property

然后在您的HTTP成功将响应数据设置为相应的section对象数据属性

  }).success(function (data) {
      section.data = data;
    });

and in your HTML Bind to the data property of the section object

并在HTML中绑定到section对象的data属性

    app.controller('sectionController', ['$scope', '$http', function($scope, $http) {
    $scope.sections = [
        {id: 1, title: 'Page 1', data: ''},
        {id: 2, title: 'Page 2', data: ''},
        {id: 3, title: 'Page 3', data: ''},
        {id: 4, title: 'Page 4', data: ''},
        {id: 5, title: 'Page 5', data: ''}];

    angular.forEach($scope.sections, function(section) {
        $http({
            url : '../../src/text/section' + section.id +'.txt',
            dataType: 'text'
        }).success(function (data) {
            section.data = data;
        });
    });
}]);

#1