AngularJS - 获取第一个元素

时间:2016-02-05 14:51:02

标签: angularjs

我已设置此服务以获取我的所有活动:

app.service('EventService', function (Event) {

        var self = {
            'selectedEvent': null,
            'page': 1,
            'hasMore': true,
            'isLoading': false,
            'events': [],
            'loadEvents': function () {
                if (self.hasMore && !self.isLoading) {
                    self.isLoading = true;

                    var params = {
                        'page': self.page,
                        'place_id': "{{ request()->get('place_id') ?: '' }}",
                        'category_id': "{{ request()->get('category_id') ?: '' }}",
                        'date': "{{ request()->get('date') ?: '' }}",
                        'date_from': "{{ request()->get('date_from') ?: '' }}",
                        'date_to': "{{ request()->get('date_to') ?: '' }}",
                    };

                    Event.get(params, function (data) {
                        console.log(data);
                        angular.forEach(data.data, function (event) {
                            console.log('Event: ' + event);
                            self.events.push(new Event(event));
                        });

                        if (!data.next_page_url) {
                            self.hasMore = false;
                        }
                        self.isLoading = false;
                    });
                }
            },
            'loadMore': function () {
                if (self.hasMore && !self.isLoading) {
                    self.page += 1;
                    self.loadEvents();
                }
            }
        };

        self.loadEvents();

        return self;
    });

这是我的控制者:

app.controller('EventsCtrl', function ($scope, $http, EventService) {

        $scope.events = EventService;

        $scope.loadMore = function () {

            $scope.events.loadMore();
        };

        // $scope.loading = false;


        $scope.selectEvent = function (event) {
            $scope.selectedEvent = event;
            //console.log('selezionato');
        };

    });

现在selectedValue为空,仅当用户转到变量填充的行时。 如何确保如果未设置变量,则第一个元素应该是选定的元素?

我尝试在服务中添加一个新方法:

'getFirst': function(){
      self.selectedEvent = self.events[0];
 }

但是在控制器中我使用:

$scope.selectedEvent = EventService.getFirst();

它是空的。
看起来当调用该函数时,事件尚未加载。

我该如何解决?

编辑:

这是我从后端得到的json:

{"total":40,"per_page":7,"current_page":1,"last_page":6,"next_page_url":"http:\/\/demo.meetmount.com\/it\/eventi\/getJsonEvents?page=2","prev_page_url":null,"from":1,"to":7,"data":[{"id":1,"user_id":1,"place_id":5,"category_id":0,"title":"Error sunt non sit.","description":"Nisi modi ratione adipisci qui iure odio possimus. Quisquam eos quidem atque animi aliquam rerum. Inventore fugiat sed consequatur debitis expedita quo quis accusamus. Ad officia vero temporibus voluptatum.","image":null,"date":"1983-03-12 00:00:00","difficulty_level":2,"price":null,"max_participants":null,"created_at":"2016-01-31 18:07:44","updated_at":"2016-01-31 18:07:44","deleted_at":null,"place":{"id":5,"name":"Colere","slug":"colere","filename":null,"originalname":null,"latitude":"45.9742604","longitude":"10.0850681","region_id":9,"cap":"24020","created_at":"2016-01-31 18:07:43","updated_at":"2016-01-31 18:07:43","deleted_at":null}},{"id":2,"user_id":1,"place_id":7,"category_id":0,"title":"Sunt quae dolore pariatur suscipit.","description":"Aut ullam voluptatibus accusantium est. Autem optio et a culpa non. Aut ratione dignissimos sequi enim et quae. Reprehenderit veniam sunt natus mollitia in.","image":null,"date":"2012-12-12 00:00:00","difficulty_level":3,"price":null,"max_participants":null,"created_at":"2016-01-31 18:07:44","updated_at":"2016-01-31 18:07:44","deleted_at":null,"place":{"id":7,"name":"Lizzola","slug":"lizzola","filename":null,"originalname":null,"latitude":"46.0240469","longitude":"10.0144382","region_id":9,"cap":"24020","created_at":"2016-01-31 18:07:43","updated_at":"2016-01-31 18:07:43","deleted_at":null}},{"id":3,"user_id":1,"place_id":17,"category_id":0,"title":"Omnis fugit libero rem et.","description":"Nihil eum dolorem perferendis autem. Id id aperiam ex itaque nulla.","image":null,"date":"1976-12-01 00:00:00","difficulty_level":4,"price":null,"max_participants":null,"created_at":"2016-01-31 18:07:44","updated_at":"2016-01-31 18:07:44","deleted_at":null,"place":{"id":17,"name":"Stelvio","slug":"stelvio","filename":null,"originalname":null,"latitude":"46.5333333","longitude":"10.4500000","region_id":9,"cap":"7536","created_at":"2016-01-31 18:07:43","updated_at":"2016-01-31 18:07:43","deleted_at":null}},{"id":4,"user_id":1,"place_id":6,"category_id":0,"title":"Totam et distinctio eligendi corrupti necessitatibus error.","description":"Aut modi et et ipsa facilis dolorem. Provident qui aut quae tempora et distinctio. Sunt ipsa libero blanditiis. Occaecati doloribus tenetur laboriosam in.","image":null,"date":"1977-12-11 00:00:00","difficulty_level":1,"price":null,"max_participants":null,"created_at":"2016-01-31 18:07:44","updated_at":"2016-01-31 18:07:44","deleted_at":null,"place":{"id":6,"name":"Livigno","slug":"livigno","filename":null,"originalname":null,"latitude":"46.5386360","longitude":"10.1357319","region_id":9,"cap":"23030","created_at":"2016-01-31 18:07:43","updated_at":"2016-01-31 18:07:43","deleted_at":null}},{"id":5,"user_id":1,"place_id":5,"category_id":0,"title":"Expedita aspernatur provident amet suscipit dignissimos nostrum amet.","description":"Sapiente qui quis omnis fugit qui consectetur aut. Ab dolorem est error est fugiat. Culpa dolore rem iusto delectus dolore.","image":null,"date":"1986-10-30 00:00:00","difficulty_level":2,"price":null,"max_participants":null,"created_at":"2016-01-31 18:07:44","updated_at":"2016-01-31 18:07:44","deleted_at":null,"place":{"id":5,"name":"Colere","slug":"colere","filename":null,"originalname":null,"latitude":"45.9742604","longitude":"10.0850681","region_id":9,"cap":"24020","created_at":"2016-01-31 18:07:43","updated_at":"2016-01-31 18:07:43","deleted_at":null,"translations":[]}},{"id":6,"user_id":1,"place_id":2,"category_id":0,"title":"Id officiis dolores quidem unde quo.","description":"Quas enim ratione aut. Nihil culpa placeat quisquam corrupti magnam repudiandae. Qui deleniti quam molestiae autem itaque.","image":null,"date":"1987-11-10 00:00:00","difficulty_level":1,"price":null,"max_participants":null,"created_at":"2016-01-31 18:07:44","updated_at":"2016-01-31 18:07:44","deleted_at":null,"place":{"id":2,"name":"Bormio","slug":"bormio","filename":null,"originalname":null,"latitude":"46.4663571","longitude":"10.3704671","region_id":9,"cap":"23032","created_at":"2016-01-31 18:07:43","updated_at":"2016-01-31 18:07:43","deleted_at":null}},{"id":7,"user_id":1,"place_id":11,"category_id":0,"title":"Dolores voluptas id ad itaque voluptates molestias minus.","description":"Modi et soluta porro voluptates at nihil. Quaerat commodi et temporibus esse harum autem reprehenderit. Incidunt velit ut sit temporibus adipisci voluptatem.","image":null,"date":"1976-12-13 00:00:00","difficulty_level":3,"price":null,"max_participants":null,"created_at":"2016-01-31 18:07:44","updated_at":"2016-01-31 18:07:44","deleted_at":null,"place":{"id":11,"name":"Piani di bobbio Valtorta","slug":"piani-di-bobbio-valtorta","filename":null,"originalname":null,"latitude":"45.9728896","longitude":"9.5037049","region_id":9,"cap":"24010","created_at":"2016-01-31 18:07:43","updated_at":"2016-01-31 18:07:43","deleted_at":null}}]}

这是小提琴(它不起作用)

https://jsfiddle.net/15v107c3/

1 个答案:

答案 0 :(得分:1)

你是以正确的方式做到的,你唯一缺少的是首先 loadEvents

尝试先调用EventService.loadEvents();,然后您可以引用相同的变量,因为在调用loadEvents()时只填充事件;

var EventServiceObj = EventService.loadEvents();
EventServiceObj.events[0];// first event is here

您需要确保首先调用方法 loadEvents 来填充事件字段。

您可以检查某个事件是否未被选中或为空,然后 loadEvents 并选择第一个。