Question

需要在JSON文件中创建一个循环以获取模板的URL（路径）并创建模板列表...

我做错了什么？

//get the JSON file from the server
$http.get('static/titles.json').success(function(doc){
		$scope.docs = doc;
		//preenche os templates a partir do JSON.
		fillTemplatesList();
	}).error(function(error){
		console.log(error);
	});


$scope.templates = [];

	function fillTemplatesList() {
		for (var i = 0; i < $scope.docs.length; i++) {
			$scope.templates[i].url = $scope.docs[i].url;
			console.log($scope.templates.url);
		}
		
	}

//when user clicks, the page changes.
$scope.cliked = function(index){
		$scope.template = $scope.templates[index];
		console.log(index);
	};

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

Answer 1

所以我可以看到几个问题，但你可以这样做：

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

然后在你的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)

所以我只维护url列表，似乎没有必要再用fillTemplatesList函数解析它们。然后，当您单击时，您可以根据一些简单的逻辑更改索引。

尝试使用此plunkr，您可以将json数组放在我的位置：

plunky

然而，这似乎只是在尝试进行ng-routing，所以我会看一下，也许会从那里的大量模板中获取样本ng-route plunkr。

使用JavaScript中的循环从json创建模板列表

1 个答案: