在AngularJS中動態加載HTML元素

我是AngularJS的完整初學者，在過去花了我所有的時間在jQuery上。我想要做的是從數據源中讀取頁面的內容，填充各種HTML元素，然後顯示它們。在AngularJS中動態加載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數據迭代，加載由「類型」屬性定義的模板，使用「內容」屬性填充它，並然後在「#Content」div中顯示所有元素？我會怎麼做？

這是在AngularJS中完成這類任務的正確方法嗎？我感覺我可能正在用jQuery的思維方式來解決這個問題，並且我想在太過分之前檢查一下。

來源

2014-12-03 Sam King

可能重複[AngularJS - 動態創建元素指定指令（http://stackoverflow.com/questions/20025526/angularjs-dynamically-creating-elements-that-specify-directives ） – Fals 2014-12-03 15:16:18

這根本不是這個問題的重複。 – 2014-12-19 09:30:52

首先使用陣列，而不是一個詞典：

[ 
    { 
     "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-包括加載模板。重複過您的收藏：

<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>

的

來源

2014-12-03 15:35:06 pixelbits

它的工作，謝謝！然而，我不得不做一些小的修改：我的模板需要ng-bind-html =「Content」來正確呈現HTML，並且ng-include的src需要成爲src =「item.Type +」的.html'」 – 2014-12-04 15:31:49

在AngularJS中動態加載HTML元素

回答

相關問題