Erstellen Sie eine Liste von Vorlagen von einem json mit Schleife in JavaScript

Question

Benötigen Sie eine Schleife in einer JSON-Datei zu erstellen, die URL (Pfad) zu den Vorlagen zu erhalten und eine Liste von Vorlagen erstellen ...

Was ich tue falsch?

//get the JSON file from the server 
 
$http.get('static/titles.json').success(function(doc){ 
 
\t \t $scope.docs = doc; 
 
\t \t //preenche os templates a partir do JSON. 
 
\t \t fillTemplatesList(); 
 
\t }).error(function(error){ 
 
\t \t console.log(error); 
 
\t }); 
 

 

 
$scope.templates = []; 
 

 
\t function fillTemplatesList() { 
 
\t \t for (var i = 0; i < $scope.docs.length; i++) { 
 
\t \t \t $scope.templates[i].url = $scope.docs[i].url; 
 
\t \t \t console.log($scope.templates.url); 
 
\t \t } 
 
\t \t 
 
\t } 
 

 
//when user clicks, the page changes. 
 
$scope.cliked = function(index){ 
 
\t \t $scope.template = $scope.templates[index]; 
 
\t \t console.log(index); 
 
\t };

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

Answer 1

So gibt es mehrere Probleme von dem, was ich sehen kann, jedoch können Sie etwas tun, wie folgt:

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

    </div> 
    <button ng-click="clicked()">Click</button> 
    </div> 

Und dann in Ihrem JS:

var myapp = angular.module('myapp', []) 

var json = ['home.html', 'test.html']; 
function myController($scope) { 
    var vm = this; 
    vm.index =0; 
    vm.template = {url : json[vm.index]} 
    $scope.clicked = function() { 
    vm.index = 0 + !vm.index 
    vm.template.url = json[vm.index]; 
    } 
} 

myapp.controller('myCtrl', myController) 

So würde ich nur die Liste der URLs pflegen, da doe Es ist nicht nötig, sie erneut mit der Funktion fillTemplatesList zu analysieren. Wenn Sie dann klicken, können Sie einfach den Index ändern, basierend auf einer einfachen Logik.

Experiment mit diesem plunkr, können Sie Ihren Json-Array anstelle von mir gesagt:

plunky

aber es dies scheinen würde nur wirklich ng-Routing zu tun versuchen, und so würde ich das betrachten und vielleicht bekommst du eine Probe aus dem riesigen Stapel von Vorlagen.