我有这个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 -->