从JSON创建模板循环(ng-include)?

时间:2016-08-17 16:01:34

标签: javascript angularjs json

我有这个JSON的主题列表和本主题模板的路径(ng-include),如下所示:

  

{“id”:“01”,“title”:“Primeiros Passos no sistema”,   “url”:“static / doc / 01.html”},

我已经可以使用NG-REPEAT从JSON中创建一个列表,但是如何在javascript中创建我的模板列表?

angular.module('duall')
.controller('documentationController', [
	'$scope', 
	'$http',	
	 function($scope, $http){

	$scope.docs = [];

	
	$http.get('static/titles.json').success(function(doc){
		$scope.docs = doc;
	}).error(function(error){
		console.log(error);
	});

	//caminho onde estão os arquivos
	//var path = "static/doc/";
	//caminho para os templates 'htmls' de cada parte da documentação já formatados
	//$scope.templates = [
	//{name: 'Primeiros Passos', url:path+'01.html'},
	//{name: 'Login', url:path+'02.html'}
	//];

	for(i = 0; i < $scope.docs.$index; i++ ){
		$scope.templates.name[i] = $scope.docs.name[i];
		$scope.templates.url[i] = $scope.docs.url[i];
	}

	$scope.template = $scope.templates[0];


	$scope.cliked = function(index){
		$scope.template = $scope.templates[index];
		console.log(index);
	};

}]);
<div ng-controller="documentationController">
<div class="row">
  <div  class="col s3" >
    
    
    <div class="input-field col s12" >      
      <input id="search" type="search" ng-model="q" aria-label="filter docs"/>
      <label for="search"><strong>Pesquise Algo! :)</strong></label>
      <i class="material-icons prefix">search</i>
    </div>
    
    
    <ul class="animate-container">
      <!-- <li ng-repeat="docs in docs | orderBy:'title' | filter:q as results "> -->
      <li  ng-repeat="docs in docs | filter:q as results ">
        <i class="material-icons tiny">search</i>
        <a ng-click="cliked($index)" href="">{{docs.title}}</a>
        <div class="divider"></div>
        <br>
      </li>

      <li ng-if="results.length === 0">
        <strong>Nada encontrado :(</strong>
      </li>
    </ul>  
    
        
  </div> <!-- Fim col s3 -->


  <div id="container-doc" class="col s9">
  <br>
  <div class="container left" ng-include="template.url">
      
  </div>
  </div>

  </div><!-- Fim col s9 -->


</div><!-- fim ROW -->
</div><!-- Fim Controller -->  

0 个答案:

没有答案