javascript – AngularJS在第一次ng-click时返回undefined

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – AngularJS在第一次ng-click时返回undefined，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2788字，纯文字阅读大概需要4分钟。

内容图文

我正在构建一个系统,该系统根据使用AngularJS发送到API的日期来获取新事件.我目前仍处于AngularJS的学习阶段,所以我想知道是否有一些我失踪的东西.

我的问题是,即使数据在页面加载时正确加载,当我第一次为$scope.newEvents获取未定义时单击按钮,即使它成功从API获取数据(我可以在控制台中看到) ).

我试图建立一个JSFiddle,但我无法完成整个工作.

这是html输出…

输出…

    <ul>
      <li ng-repeat="event in events | orderBy:'-event_date' ">
        <span >{{event.event_date}},{{event.event_name}}, {{event.event_venue}}, {{event.event_description}} </span>
      </li>
    </ul>

我的js中的get请求……

var eventApp = angular.module('eventApp', ['ngRoute']);


eventApp.factory("services", ['$http', function($http) {

    var apiBase = 'http://example.net/angular-api/'

    var service = {};

    service.getEvents = function(latest_date){
        return $http.get(apiBase + 'events?latest_date=' + latest_date);
    }

    return service;   
}]);

当页面加载其工作正常时,它会成功请求并更新$scope.events …

var date = new Date();

$scope.todays_date = date.getUTCFullYear() + '-' +
    ('00' + (date.getUTCMonth()+1)).slice(-2) + '-' +
    ('00' + date.getUTCDate()).slice(-2) + ' ' + 
    ('00' + date.getUTCHours()).slice(-2) + ':' + 
    ('00' + date.getUTCMinutes()).slice(-2) + ':' + 
    ('00' + date.getUTCSeconds()).slice(-2);

$scope.events = [{}];

services.getEvents($scope.todays_date).then(function(data){
    $scope.events = data.data;

});

但是当点击加载ng-click功能的按钮时,我的数据未定义.我最初认为日期格式有问题,但它成功获取数据这一事实令我感到困惑.问题从下面开始……

        $scope.addFiveNew = function (new_or_old) {

        if (new_or_old == 'new') {

            $scope.latest_date = $scope.getNewestDate();


            services.getEvents($scope.latest_date).then(function(data){
                $scope.newEvents = data.data;
            });

            console.log($scope.newEvents);

            // update the list (this is currently failing on first click)
            angular.forEach($scope.newEvents,function(item) {
                $scope.events.push(item);
            });


        }

控制器中的此功能创建发送日期…

$scope.getNewestDate = function() {
        var sortedArray = $filter('orderBy')($scope.events, 'event_date');
        var NewestDate = sortedArray[sortedArray.length - 1].event_date;
        return NewestDate;
    };  

这是一些数据的例子……

{
 "event_id":"1",
 "event_name":"Event 1",
 "event_date":"2014-09-26 00:00:00",
 "event_venue":"Limerick",
 "event_description":"stuff"
}

解决方法:

在我看来,你的服务上的getEvents调用正在返回一个promise.在promise上调用.then将异步调用传递的函数.那么,你的$scope.newEvents = data.data;将在该块中的其余语句之后调用.我认为您可以将.then语句更改为以下内容,它应该可以正常工作：

$scope.addFiveNew = function (new_or_old) {

    if (new_or_old == 'new') {

        $scope.latest_date = $scope.getNewestDate();

        services.getEvents($scope.latest_date).then(function(data){
            $scope.newEvents = data.data;
            console.log($scope.newEvents);
            // update the list (this is currently failing on first click)
            angular.forEach($scope.newEvents,function(item) {
                $scope.events.push(item);
            });
        });

    }
}

内容总结

以上是互联网集市为您收集整理的javascript – AngularJS在第一次ng-click时返回undefined全部内容，希望文章能够帮你解决javascript – AngularJS在第一次ng-click时返回undefined所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端