我是JS和Angular的新手。我正面临从JSON文件获取数据的问题。以下是结构的外观:
我的服务如下:
(function(){
angular.module('models')
.service('lessonService', function ($http, Backand) {
var baseUrl = '/1/objects/';
var objectName = ['lessons/', 'subCategories', 'lessons_categories_switch'];
function getUrlAllLessons () {
return Backand.getApiUrl() + baseUrl + objectName[0];
};
/*All Lessons*/
getLessons = function () {
return $http.get(getUrlAllLessons());
};
/*Subcategories*/
function getUrlSubcategories () {
return Backand.getApiUrl() + baseUrl + objectName[1];
};
getCategories = function () {
return $http.get(getUrlSubcategories());
};
/*Category Lesson Swith*/
function getUrlSwitch () {
return Backand.getApiUrl() + baseUrl + objectName[2];
};
getSwitch = function () {
return $http.get(getUrlSwitch());
};
return {
getLessons: getLessons,
getCategories: getCategories,
getSwitch: getSwitch
};
})
})();
我的控制器如下:
(function(){
angular.module('appLessons', ['backand'])
.controller('lessonCtrl', function($scope, Backand, lessonService){
$scope.lessons = [];
$scope.subCategories = [];
$scope.switches = [];
function getAllLessons() {
lessonService.getLessons()
.then(function (result) {
$scope.lessons = result.data.data;
});
};
function getAllSubCategories() {
lessonService.getCategories()
.then(function (result) {
$scope.subCategories = result.data.data;
});
};
function getAllSwitch() {
lessonService.getSwitch()
.then(function (result) {
$scope.switches = result.data.data;
});
};
getAllLessons();
getAllSubCategories();
getAllSwitch();
})
.controller('lessonDetailCtrl', ['$scope', '$routeParams', '$http', 'Backand', function($scope, $routeParams, $http, Backand) {
$http.get(Backand.getApiUrl() + '/1/objects/lessons/' + $routeParams.id)
.success(function(data) {
$scope.lesson = data;
$scope.code = $scope.lesson.youtubeVideoCode;
});
$scope.closeLeftBar = function (){
var categoryList = $('.left-lessons');
categoryList.hide();
};
}])
})();
我正在努力获得属于其中一个子类别的所有课程名称。
在视图中我有这段代码:
<div ng-repeat="category in subCategories">
<div ng-show="category" class="col-md-3 lesson-tile">
<h2>{{ category.name }} </h2> // this works
<div ng-repeat="lesson in category.lessons">
<div ng-show="lesson" class="col-md-3 lesson-tile">
<h2>{{ lesson.name }} </h2> // I have problems here
</div>
</div>
</div>
</div>
我错了什么?感谢任何帮助,谢谢大家。
答案 0 :(得分:1)
lessons
内没有category
道具。您应该包括或检查所有课程,并按类别显示。
你可以试试这个:
<div ng-repeat="category in subCategories">
<div ng-show="category" class="col-md-3 lesson-tile">
<h2>{{ category.name }} </h2> // this works
<div ng-repeat="lesson in lessons">
<div ng-show="checkCategory(category,lesson)" class="col-md-3 lesson-tile">
<h2>{{ lesson.name }} </h2> // I have problems here
</div>
</div>
</div>
</div>
Ng功能:
$scope.checkCategory = function(currentCategory,currentLesson){
console.log(currentCategory);
console.log(currentLesson);
console.log($scope.switches);
if($filter('filter')($scope.switches, {category : currentCategory.id + "", lesson: currentLesson.id + ""}).length > 0 )
return true;
return false;
};
Ps:过滤器可以更改你的json对象。也许你应该过滤类似的东西:
{Id : currentCategory.Id}
答案 1 :(得分:0)
也许带有模拟数据的JSfiddle可能有助于理解您的问题。
您的HTML模板表明您需要在子类别上提供课程。所以你的数据源应该是这样的:
$scope.subCategories = [
{
name : 'category-name-a',
lessons : [
{
name : 'lesson-name-1'
},
{
name : 'lesson-name-2'
}
]
}
];