负载动态内容放入容器中AngularJS版本1.4

我有一个文章容器：负载动态内容放入容器中AngularJS版本1.4

<div ng-controller="articlesCtrl" > 
    <ul id="articles-container" > 
     <li class="article"> 
      <div>Article 1</div> 
      <div>Article Text</div> 
     </li> 
     <li> 
      <div>Article 1</div> 
      <div>Article Text</div> 
     </li> 
    </ul> 
</div> 

<button ng-click="getArticles();" class="uk-button" >Get Articles</button>

一旦按下按钮，我收到JSON数据响应，我需要添加接收到物品的容器。

我想使用为目的这个角度模板：

<script type="text/ng-template" id="articles-container.tpl"> 
    <div ng-bind-html="articlesContainer"> 
     <div ng-repeat="article in articles"></div> 
      <div>{{article.title}}</div> 
      <div>{{article.text}}</div> 
    </div> 
</script>

请告诉我怎么走我怎么能实现的功能或在那里我可以看到一个例子。

感谢您的提前。

来源

2016-08-16 Alex Lavrik

HTML：

<div ng-controller="articlesCtrl"> 
    <ul> 
     <li class="article" ng-repeat="article in articles"> 
      <h1>{{article.title}}</h1> 
      <div ng-bind-html="article.text"></div> 
     </li> 
    </ul> 
</div> 

<button ng-click="getArticles();" class="uk-button" >Get Articles</button>

控制器：

.controller("articlesCtrl", function($scope, $http){ 
    $scope.articles = []; 
    $scope.getArticles = function(){ 
     $http.get("url").then(function(res){ 
      angular.forEach(res.data.articles, function(article){ 
       $scope.articles.push(article); 
      }); 
     }); 
    } 
})

来源

2016-08-16 04:19:42

感谢Srujan，这一点！它像一个魅力。 –

Hi @AlexLavrik如果这个或任何答案已解决您的问题，请点击复选标记，考虑[接受它]（http://meta.stackexchange.com/q/5234/179419）。这向更广泛的社区表明，您已经找到了解决方案，并为答复者和您自己提供了一些声誉。没有义务这样做。 –

这听起来像你想有一个component。请参阅下面的示例，只需将templateUrl替换为需要链接引用的html文件。

(function() { 
 
    'use strict'; 
 

 
    angular 
 
    .module('exampleApp', []) 
 
    .controller('ExampleController', ExampleController); 
 

 
    function ExampleController() { 
 
    var vm = this; 
 
    vm.articles = []; 
 

 
    vm.getArticles = function() { 
 
     // you would call the article service here 
 
     vm.articles = [{ 
 
     title: 'home', 
 
     text: Math.random().toString(36) // just use a random string for demonstration purposes 
 
     }, { 
 
     title: 'about', 
 
     text: Math.random().toString(36) 
 
     }]; 
 
    }; 
 
    } 
 
})(); 
 

 
(function() { 
 
    'use strict'; 
 

 
    angular 
 
    .module('exampleApp') 
 
    .component('articles', { 
 
     bindings: { 
 
     articles: '<' 
 
     }, 
 
     template: "<div ng-repeat='article in vm.articles'> \ 
 
      <div>{{article.title}}</div> \ 
 
      <div>{{article.text}}</div> \ 
 
    </div>", 
 
     controllerAs: 'vm' 
 
    }); 
 
})();

<!DOCTYPE html> 
 
<html ng-app='exampleApp'> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="ExampleController as vm"> 
 
    <articles articles="vm.articles"></articles> 
 
    <button ng-click="vm.getArticles()">Get articles</button> 
 
</body> 
 

 
</html>

来源

2016-08-16 05:21:21 ScottL

谢谢，但我使用的是Angular 1.4。 –

负载动态内容放入容器中AngularJS版本1.4

回答

相关问题