此时我已撞墙了。我的json文件已连接（我在Chrome控制台中验证过），但它没有显示在我的services.html页面上。我究竟做错了什么？在解决我的问题时，我将所有数据放在js文件中并且能够使其工作，但出于显而易见的原因，我想使用json文件连接我的数据。我使用的是AngularJS 1.6.2。
(function () {
'use strict';
// Create module and give it a name
// also include ngRoute dependency in order to route to different pages
var makeupApp = angular.module('makeupApp', ['ngRoute']);
// Configure the routes
makeupApp.config(function ($routeProvider) {
$routeProvider
// route for home page
.when('/', {
templateUrl: 'pages/home.html'
})
// route for bio page
.when('/bio', {
templateUrl: 'pages/bio.html'
})
// route for services page
.when('/services', {
templateUrl: 'pages/services.html'
})
// route for contact page
.when('/contact', {
templateUrl: 'pages/contact.html'
})
.otherwise({
templateUrl: 'pages/404.html'
});
});
makeupApp.controller('PortfolioCtrl', function () {
this.portfolio = pictures;
pictures = [
{
image: 'assets/img/photoshoot.jpg'
}
];
});
makeupApp.controller('ServicesCtrl', function ($scope, $http) {
$http.get("../assets/services.json").then(function (response) {
$scope.products = response.data;
});
});
})();<div class="container" ng-controller="ServicesCtrl as service">
<div class="row">
<!--Services Section-->
<div id="glam-menu" class="menu-container">
<div class="menu">
<div class="menu-basic text-center">
<div class="col-md-12">
<h3><span class="section-title">General Makeup Application</span></h3>
<p>voluptatibus arbitrantur illum illum sunt concursionibus cupidatat possumus
doctrina cillum labore eiusmod fidelissimae quibusdam laborum cupidatat dolor
quem ullamco sed.</p>
</div>
</div>
<div class="menu-description" ng-repeat="product in service.products">
<div class="col-md-6">
<div class="clearfix">
<div class="pull-left"><strong>{{product.general[0].name}}</strong></div>
<div class="pull-right">{{product.general[0].price | currency}}</div>
</div>
<p class="clearfix"><strong>{{product.general[0].service-description}}</strong></p>
</div>
</div>
</div>
</div>
<!--Services Section-->
</div>
</div>
[{
"general": [
{
"name": "Makeup in the Studio",
"price": 60,
"service-description": "quamquam nescius multos quo singulis tamen philosophari cupidatat deserunt offendit veniam te excepteur probant laboris qui in deserunt quid legam"
},
{
"name": "On Location Makeup Service",
"price": 80,
"service-description": "Makeup application at the location of the client's choice. Price includes lashes, and travel within a 30 mile radius of the LDM Studio. All makeup at a chair are provided. Supplemental lighting and a table are not provided."
}
],
"bridal": [
{
"name": "Consultations",
"price": 60,
"service-description": "1) Price is for a second consultation for the client who has booked services. 2) Price is for first consultation if client does not book services. 3) Price is for a consultation for anyone associated with the bridal party."
},
{
"name": "Blushing Bride",
"price": 125,
"service-description": "On Location Makeup Application for your wedding."
},
{
"name": "Bridal Entourage",
"price": 80,
"service-description": "On Location Makeup application for anyone associated with the Bride on the Wedding Day."
},
{
"name": "VIP Bride",
"price": 225,
"service-description": "On Location Makeup Application and extended stay for touch ups before the ceremony and after the ceremony."
},
{
"name": "Princess Treatment",
"price": 60,
"service-description": "On Location Makeup application on Wedding Day for girls under 17 yrs old and under"
},
{
"name": "Celebrity Bride",
"price": 350,
"service-description": "On Location Makeup application for your Wedding, and 3 other Wedding related events. Includes one consultation and 30 mile travel."
},
{
"name": "Tattoo Cover",
"price": 50,
"service-description": "Starting Price. Pricing depends on size and depth of color. Please contact for more information."
}
],
"production": [
{
"name": "Half Day Rate",
"price": 250,
"service-description": "On location makeup services for up to 3.5 hours."
},
{
"name": "Full Day Rate",
"price": 500,
"service-description": "On location makeup services for up to 8 hours."
}
],
"lessons": [
{
"name": "Makeup Lesson",
"price": 125,
"service-description": "Interactive Lesson suited to client needs. Common elements listed below, but not limited to. I gear it towards your needs and wants. 1) Approx 2 hours. 2) Located at the LDM Studio. 3) Makeup bag analysis. What to keep and what to toss. 4) Feature and color analysis. 5) Techniques to achieve 2 different looks: day and night. 6) Tools and product description and suggestions. 7) False lash application lesson. 8) Hands on and demonstration teaching. 9) Post lesson open door policy. Email me about anything makeup related! Any and all questions will be answered in a timely fashion."
},
{
"name": "Concierge Makeup Shopping",
"price": 100,
"service-description": "In addition, for clients who have booked a Lesson. Don't be intimidated by large cosmetics departments or pushy sales people. I will navigate you to the products you need as well as others that you might be interested in investing in later. I will introduce you to people who can assist you in the future with your shopping experience in conjunction with my help. *Travel with client to International Plaza in Tampa, FL to shop for products."
}
]
}]
答案 0 :(得分：0)
由于您使用Controller作为语法，因此将其更改为 this.products
makeupApp.controller('ServicesCtrl', function ($scope, $http) {
$http.get("../assets/services.json").then(function (response) {
this.products = response.data;
});
});
答案 1 :(得分：0)
您没有正确循环。 尝试像这样的ng-repeats
<div class="menu-description" ng-repeat="product in products">
<div ng-repeat="p in product['general']">
{{ p.name }}
</div>
</div>
以下是plnkr
的链接