无法在数据endVal中设置值=“”;｛｛ucount｝｝”;使用Angular JS的CountUp

Unable To Set Value In data-endVal="{{ucount}}" of CountUp using Angular JS

本文关键字：ucount Angular CountUp JS 使用 数据 endVal 设置      更新时间：2023-09-26

我正在获取客户和供应商的数量，以便将其显示在仪表板上使用countUp.js作为计数器。

使用的文件

AngularJS v1.3.15countUp.jshttps://github.com/inorganik/countUp.js1.1.1

CountUp 1.1.1 的精简版

控制器代码

myApp.controller('dashboardCtrl', [
        '$scope',
        'files',
        '$http',
        function ($scope, files,$http) {
            $http.get('../../../Admin/Notification/GetAllNotifications')
                .success(function (data, status, headers, config) {
                    $scope.ucount = parseInt(data['ucount']);
                    $scope.scount = parseInt(data['scount']);
                    //alert($scope.ucount);
                    //alert($scope.scount);
                }).
                error(function (data, status, headers, config) {
                    console.log(status);
                });
        }
])

从GetAllNotifications 生成的JsonResult

｛"ucount"：3，"scount"：2｝

显示数据的分区

<div class="col-lg-3 col-sm-6">
           <div class="info_box_var_1 box_bg_a">
            <div class="info_box_body">
                <span class="info_box_icon icon_group"></span>
                <span class="countUpMe"  data-endVal="1300">1300</span>
            </div>
            <div class="info_box_footer">
                Total Customers
            </div>
        </div>
</div>

上面的代码非常适用于静态数据，但当我使用｛｛ucount｝｝在数据endVal属性中，它在控制台中给出错误："countUp错误：startVal或endVal不是数字"

可能出现错误，因为get请求是异步的，并且在尝试访问时$scope.ucount不存在？是否尝试设置$scope.ucount的初始值？如0，例如

我初始化了状态中的数据，现在它正在工作这是国家代码

myApp.state("auth.home", {
                // this state page title
                page_title: 'Stock Management - Dashboard',
                // this state url
                url: "/",
                templateUrl: '../../../Admin/Page/getPage?path=Views/templateviews/dashboard.cshtml',
                // load state specific js/css
                resolve: {
                    notificationdetail: function ($http) {
                        return $http({ method: 'GET', url: '../../../Admin/Notification/GetAllNotifications' })
                            .then(function (data) {
                                var notificationdetail = data.data;
                                return notificationdetail;
                            });
                    },
                    files: [
                        'uiLoad',
                        function (uiLoad) {
                            return uiLoad.load([
                                // countUp animation
                                '../../../Areas/Admin/assets/js/countUp.min.js',
                            ]);
                        }
                    ]
                },
                controller: 'dashboardCtrl',
                ncyBreadcrumb: {
                    label: 'Home'
                }
            })

这就是现在的控制器代码

myApp.controller('dashboardCtrl', [
    '$scope',
    'files',
    '$http',
    'notificationdetail',
    function ($scope, files, $http, notificationdetail) {
        $scope.ucount = parseInt(notificationdetail['ucount']);
        $scope.scount = parseInt(notificationdetail['scount']);
        //// run scripts after state load
        $scope.$on('$stateChangeSuccess', function () {
            // init dashboard functions
            $scope.$watch('countries_data', function () {
                countries_data = $scope.countries_data;
                yukon_dashboard.init();
            });
        })
    }])

ui代码

<div class="col-lg-2 col-sm-6">
    <div class="info_box_var_1 box_bg_a">
        <div id="notficDiv" class="info_box_body">
            <span class="info_box_icon icon_group"></span>
            <span class="countUpMe" data-endval="{{ucount}}">{{ucount}}</span>
        </div>
        <div class="info_box_footer">
            Total Customers
        </div>
    </div>
</div>

我认为问题在于如何将｛｛count｝｝传递给指令。你可能没有正确通过。因为你可能发送的不是一个数字，而是一个字符串。尝试使用：

<span class="countUpMe" count-up end-val={{count}}>...</span>
相关文章：