Я потратил несколько часов на это, и я просто не могу получить данные для отображения на странице. Я не получаю никаких ошибок, и я могу видеть полученные данные в окне консоли. Вот мой code-
На странице html -
<div class="row">
<div class="col-md-8">
<ul>
<li ng-repeat="menuContent in profileMenu">
<a href="profileMenu/{{menuContent.menuId}}">
{{menuContent.menuItem}}
</a>
</li>
</ul>
</div>
</div>
Внутри файла.json -
[{
"menuId":"1",
"menuItem":"About"
},{
"menuId":"2",
"menuItem":"Timeline"
},{
"menuId":"3",
"menuItem":"Teams"
},{
"menuId":"4",
"menuItem":"Liked Profiles"
}]
Внутри файла JS -
$http({
method: "get",
url: "data/custom-menu.json"
}).then(function(profileMenuContent){
$scope.profileMenu = profileMenuContent;
console.log($scope.profileMenu.data);
});
Спасибо, товарищи за ваши предложения! Теперь я могу просмотреть данные json. Ошибка находится в файле.js. Поскольку я использую обещание вызывать данные, я должен использовать '.data' для получения данных в переменной $ scope. Вот окончательный код -
В файле HTML:
<div class="row">
<div class="col-md-8">
<ul>
<li ng-repeat="menuContent in profileMenu">
<a href="profileMenu/{{menuContent.menuId}}">
{{menuContent.menuItem}}
</a>
</li>
</ul>
</div>
В Json:
[{
"menuId":"1",
"menuItem":"About"
},{
"menuId":"2",
"menuItem":"Timeline"
},{
"menuId":"3",
"menuItem":"Teams"
},{
"menuId":"4",
"menuItem":"Liked Profiles"
}]
В js file-
$http({
method: "get",
url: "data/custom-menu.json"
}).then(function(profileMenuContent){
$scope.profileMenu = profileMenuContent.data;
console.log($scope.profileMenu.data);
});
Используйте следующий код:
$http({
method: "get",
url: "data/custom-menu.json"
}).then(function(profileMenuContent){
$scope.profileMenu = profileMenuContent.data;
console.log($scope.profileMenu);
});
Вы используете обещание в своей службе, поэтому оно вернет ваши данные в profileMenuContent.data.
здесь работает code-
'use strict';
var app = angular.module("demo", [], function($httpProvider) {
});
app.controller("demoCtrl", function($scope) {
$scope.profileMenu = [{
"menuId":"1",
"menuItem":"About"
},{
"menuId":"2",
"menuItem":"Timeline"
},{
"menuId":"3",
"menuItem":"Teams"
},{
"menuId":"4",
"menuItem":"Liked Profiles"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="demo">
<div ng-controller="demoCtrl">
<ul>
<li ng-repeat="menuContent in profileMenu">
<a href="profileMenu/{{menuContent.menuId}}">
{{menuContent.menuItem}}
</a>
</li>
</ul>
</div>
</body>
Прямо сейчас, у вас неправильный key
в HTML
Используйте menuContent.menuId
вместо menuContent.id
и используйте menuContent.menuItem
вместо menuContent.name
.
Это сработает!
profileMenuContent
?