Javascript 无法使用嵌套的json数据呈现angular 1中的导航菜单
我想使用angular服务获取的json数据实现一个导航栏。我的服务和控制器工作得很好，但我无法将嵌套的json数据呈现到视图中。 下面是我的json数据：Javascript 无法使用嵌套的json数据呈现angular 1中的导航菜单,javascript,angularjs,json,twitter-bootstrap-3,Javascript,Angularjs,Json,Twitter Bootstrap 3,我想使用angular服务获取的json数据实现一个导航栏。我的服务和控制器工作得很好，但我无法将嵌套的json数据呈现到视图中。 下面是我的json数据： { "menu": [ { "name": "Electronics", "link": "1", "sub": [ { "name": "Mobiles",
{
"menu": [
{
"name": "Electronics",
"link": "1",
"sub": [
{
"name": "Mobiles",
"link": "1.1",
"sub": [
{
"name": "Samsung",
"link": "1.1.1",
"sub": null
},
{
"name": "Apple",
"link": "1.1.2",
"sub": null
},
{
"name": "Motorola",
"link": "1.1.3",
"sub": null
},
{
"name": "Lenovo",
"link": "1.1.4",
"sub": null
},
{
"name": "Mi",
"link": "1.1.5",
"sub": null
},
{
"name": "Micromax",
"link": "1.1.6",
"sub": null
},
{
"name": "Oppo",
"link": "1.1.7",
"sub": null
},
{
"name": "Vivo",
"link": "1.1.8",
"sub": null
},
{
"name": "HTC",
"link": "1.1.9",
"sub": null
}
]
},
{
"name": "Mobile Accessories",
"link": "1.2",
"sub": [ ]
},
{
"name": "Laptop",
"link": "1.3",
"sub": [ ]
},
{
"name": "Laptop Accessories",
"link": "1.4",
"sub": [ ]
},
{
"name": "Appliances",
"link": "1.5",
"sub": [ ]
}
]
},
{
"name": "Men",
"link": "2",
"sub": [ ]
},
{
"name": "Women",
"link": "3",
"sub": [ ]
},
{
"name": "Baby & Kids",
"link": "4",
"sub": [ ]
},
{
"name": "Home & Furniture",
"link": "5",
"sub": [ ]
},
{
"name": "Books & More",
"link": "6",
"sub": [ ]
}
]
}
( function ()
{
angular.module( "myApp" )
.factory( "navService", function ( $http )
{
function getNavItems()
{
return $http.get( '../data/navData.json' );
};
return {
getNavItems: getNavItems
};
} );
}()
( function ()
{
angular.module( "myApp" )
.controller( "NavController", function ( $scope, $http, navService )
{
navService.getNavItems().then( function ( menu )
{
$scope.menu = menu.data;
console.log( menu.data );
} );
} );
} ());
( function ()
{
angular.module( "myApp" )
.factory( "navService", function ( $http )
{
function getNavItems()
{
return $http.get( '../data/navData.json' );
};
return {
getNavItems: getNavItems
};
} );
}()
( function ()
{
angular.module( "myApp" )
.controller( "NavController", function ( $scope, $http, navService )
{
navService.getNavItems().then( function ( menu )
{
$scope.menu = menu.data;
console.log( menu.data );
} );
} );
} ());
navService.getNavItems().then( function ( response)
{
$scope.menu = response.data.menu;
});
navService.getNavItems().then( function ( response)
{
$scope.menu = response.data.menu;
});
我在本地制作了相同的问题，我得到了错误。但我试图解决它，我已经做到了 您正在将控制器名称与camel case一起使用。因此，有必要定义
并使用strict{
"menu": [
{
"name": "Electronics",
"link": "1",
"sub": [
{
"name": "Mobiles",
"link": "1.1",
"sub": [
{
"name": "Samsung",
"link": "1.1.1",
"sub": null
},
{
"name": "Apple",
"link": "1.1.2",
"sub": null
},
{
"name": "Motorola",
"link": "1.1.3",
"sub": null
},
{
"name": "Lenovo",
"link": "1.1.4",
"sub": null
},
{
"name": "Mi",
"link": "1.1.5",
"sub": null
},
{
"name": "Micromax",
"link": "1.1.6",
"sub": null
},
{
"name": "Oppo",
"link": "1.1.7",
"sub": null
},
{
"name": "Vivo",
"link": "1.1.8",
"sub": null
},
{
"name": "HTC",
"link": "1.1.9",
"sub": null
}
]
},
{
"name": "Mobile Accessories",
"link": "1.2",
"sub": [ ]
},
{
"name": "Laptop",
"link": "1.3",
"sub": [ ]
},
{
"name": "Laptop Accessories",
"link": "1.4",
"sub": [ ]
},
{
"name": "Appliances",
"link": "1.5",
"sub": [ ]
}
]
},
{
"name": "Men",
"link": "2",
"sub": [ ]
},
{
"name": "Women",
"link": "3",
"sub": [ ]
},
{
"name": "Baby & Kids",
"link": "4",
"sub": [ ]
},
{
"name": "Home & Furniture",
"link": "5",
"sub": [ ]
},
{
"name": "Books & More",
"link": "6",
"sub": [ ]
}
]
}
<html>
<head>
<title>Angular js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="app.js"></script>
<script src="services.js"></script>
</head>
<body ng-app="myApp">
<p>Stackover flow Answer</p>
<p>Example use $scope out side from controller.</p>
<div ng-controller="NavController">
<div class="main_container">
<div ng-view></div>
</div>
</div>
</body>
</html>
"use strict";
var app = angular.module("myApp", []);
app.controller("NavController", function($scope, $http, navService){
navService.getNavItems().then( function ( menu ){
$scope.menu = menu.data;
console.log( menu.data );
});
});
"use strict";
app.factory( "navService", function ( $http ){
function getNavItems(){
return $http.get( 'data/navData.json' );
};
return {
getNavItems: getNavItems
};
});
我在本地制作了相同的问题，我得到了错误。但我试图解决它，我已经做到了 您正在将控制器名称与camel case一起使用。因此，有必要定义
并使用strict{
"menu": [
{
"name": "Electronics",
"link": "1",
"sub": [
{
"name": "Mobiles",
"link": "1.1",
"sub": [
{
"name": "Samsung",
"link": "1.1.1",
"sub": null
},
{
"name": "Apple",
"link": "1.1.2",
"sub": null
},
{
"name": "Motorola",
"link": "1.1.3",
"sub": null
},
{
"name": "Lenovo",
"link": "1.1.4",
"sub": null
},
{
"name": "Mi",
"link": "1.1.5",
"sub": null
},
{
"name": "Micromax",
"link": "1.1.6",
"sub": null
},
{
"name": "Oppo",
"link": "1.1.7",
"sub": null
},
{
"name": "Vivo",
"link": "1.1.8",
"sub": null
},
{
"name": "HTC",
"link": "1.1.9",
"sub": null
}
]
},
{
"name": "Mobile Accessories",
"link": "1.2",
"sub": [ ]
},
{
"name": "Laptop",
"link": "1.3",
"sub": [ ]
},
{
"name": "Laptop Accessories",
"link": "1.4",
"sub": [ ]
},
{
"name": "Appliances",
"link": "1.5",
"sub": [ ]
}
]
},
{
"name": "Men",
"link": "2",
"sub": [ ]
},
{
"name": "Women",
"link": "3",
"sub": [ ]
},
{
"name": "Baby & Kids",
"link": "4",
"sub": [ ]
},
{
"name": "Home & Furniture",
"link": "5",
"sub": [ ]
},
{
"name": "Books & More",
"link": "6",
"sub": [ ]
}
]
}
<html>
<head>
<title>Angular js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="app.js"></script>
<script src="services.js"></script>
</head>
<body ng-app="myApp">
<p>Stackover flow Answer</p>
<p>Example use $scope out side from controller.</p>
<div ng-controller="NavController">
<div class="main_container">
<div ng-view></div>
</div>
</div>
</body>
</html>
"use strict";
var app = angular.module("myApp", []);
app.controller("NavController", function($scope, $http, navService){
navService.getNavItems().then( function ( menu ){
$scope.menu = menu.data;
console.log( menu.data );
});
});
"use strict";
app.factory( "navService", function ( $http ){
function getNavItems(){
return $http.get( 'data/navData.json' );
};
return {
getNavItems: getNavItems
};
});