当前位置: 动力学知识库 > 问答 > 编程问答 >

angularjs - Loading json data in nested views in angular?

问题描述:

I am new to Angular and trying to figure out nested views:

I have a json file and I would like to display that that in one of the nested views however; I don't get any result:

App:

var myApp = angular.module('myApp', []);

myApp.config(['$routeProvider',

function($routeProvider){

$routeProvider.

when('/tab1', {

templateUrl: 'tab1.html',

controller: 'tab1'

}).

when('/tab2',{

templateUrl: 'tab2.html',

controller: 'tab2'

}).

when('/tab3',{

templateUrl: 'tab3.html',

controller: 'tab3'

}).

otherwise({

redirectTo: '/tab1'

});

}]);

myApp.controller('tab1', function($scope, $http){

$scope.message = 'This is Tab1 space';

});

myApp.controller('tab2', function($scope){

$scope.message = 'This is Tab2 space';

});

myApp.controller('tab3', function($scope){

$http.get('data.json')

.success(function(data){

$scope.cars = data;

});

});

I can display tab1 and tab2 text but tab3 which has json data..

How do I have to configure tab3 controller to be able to show json data in data3 view?

myApp.controller('tab3', function($scope){

$http.get('data.json')

.success(function(data){

$scope.cars = data;

});

});

html:

<html lang="en" ng-app="myApp">

<head>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

<script src="myApp.js"></script>

</head>

<body>

<ul>

<li>

<a href="#tab1">tab1</a>

</li>

<li>

<a href="#tab2">tab2</a>

</li>

<li>

<a href="#tab3">Check Cars</a>

</li>

</ul>

<div ng-view></div>

</body>

</html>

and tab3.html

 <span ng-repeat="car in cars">

{{car.Brand}}

</span>

How can I call that json data in tab3?

Exp: http://plnkr.co/edit/medE55ZlFYBtWJExrxjU?p=preview

thank you in advance!

网友答案:

add $http dependancy in your tab3 controller as below,

myApp.controller('tab3', function($scope,$http){
分享给朋友:
您可能感兴趣的文章:
随机阅读: