Question

对于AngularJS来说，我是一个完全的初学者，过去我花了很多时间在jQuery上。我要做的是从数据源读取页面的内容，填充各种HTML元素，然后显示它们。

所以我拥有的是这个，content.json：

{
    "1" : {
        "Type" : "Title",
        "Content" : "Welcome to this Site"
    },
    "2" : {
        "Type" : "TextBox",
        "Content" : "<p>Introduction 1</p><p>Continued</p>"
    },
    "3" : {
       "Type" : "TextBox",
        "Content" : "<p>Do these tasks</p>"
    }
}

然后是一个包含以下内容的HTML页面：

<div ng-app="myapp">
    <div ng-controller="content" id="Content">
        <!-- Dynamic content to be loaded here -->
    </div>
</div>

我有几个简单的模板，TextBox.html：

<div class="TextBox">{{Content}}</div>

和Title.html：

<h1>{{Content}}</h1>

最后我的AngularJS代码：

var app = angular.module('myapp', []);
app.controller('content', ['$scope','$http',function($scope,$http) {

    $http.get('content.json').success(function(data){
        $scope.elements = data;

        // What do I do now?
    });
}]);

是否可以迭代JSON数据，加载由“Type”属性定义的模板，使用“Content”属性填充它，然后显示“#Content”div中的所有元素？我该怎么做？

这是AngularJS中此类任务的正确方法吗？我觉得我可能会以jQuery的心态来接近这个，我想在我走得太远之前检查一下。

Answer 1

首先使用数组，而不是字典：

[
    {
        "id": "1",
        "Type" : "Title.html",
        "Content" : "Welcome to this Site"
    },
    {
        "id" :"2",
        "Type" : "TextBox.html",
        "Content" : "<p>Introduction 1</p><p>Continued</p>"
    },
    {
       "id": "3",
       "Type" : "TextBox.html",
        "Content" : "<p>Do these tasks</p>"
    }
]

其次，使用ng-init来别名内容，使用ng-include来加载模板。重复你的收藏：

<div ng-app="myapp">
    <div ng-controller="content" id="Content">
        <!-- Dynamic content to be loaded here -->
        <div ng-repeat="item in elements" ng-init="Content=item.Content">
             <ng-include src="item.Type"></ng-include>
        </div>
    </div>
</div>

在AngularJS中动态加载HTML元素

1 个答案: