如何从角度中获取相关对象的数据？

Question

我是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>

我错了什么？感谢任何帮助，谢谢大家。

Answer 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}

https://docs.angularjs.org/api/ng/filter/filter

Answer 2

也许带有模拟数据的JSfiddle可能有助于理解您的问题。

您的HTML模板表明您需要在子类别上提供课程。所以你的数据源应该是这样的：

$scope.subCategories = [
    {
        name : 'category-name-a',
        lessons : [
            {
                name : 'lesson-name-1'
            },
            {
                name : 'lesson-name-2'
            }
        ]
    }
];