แนะนำวิธีแสดงเลขกำกับบน icon app ด้วย Badge Plugin

cordova plugin add cordova-plugin-badge

<ion-item class="fs16 border-item-a fnormal" nav-clear menu-close ui-sref="app.todo">
    <i class="fa fa-list fa-lg" aria-hidden="true"></i>
    To Do
</ion-item>

.state('app.todo', {// กำหนด state
    url: '/todo',  // กำหนดตำแหน่งหน้า app คล้ายๆ url ในเว็บ
    views: {
        'menuContent': { // ส่วนของการแสดงใน view ชื่อ menuContent
            templateUrl: 'templates/todo.html', // ใช้ template ชื่อ todo.html
            controller: 'TodoCtrl'// กำหนดชื่อ controller ที่จะใช้งาน
        },
        'fabContent': { // ส่วนของการแสดงใน view ชื่อ fabContent ไม่ได้กำหนดอะไร
            template: ''
        }
    }
})

<ion-view view-title="To Do List">
    <ion-nav-buttons side="right">
        <div class="buttons buttons-right header-item">
    <span class="right-buttons">
    <button class="button button-icon button-clear ion-android-more-vertical"> </button>
    </span>
        </div>
    </ion-nav-buttons>
    <ion-content ng-class="{expanded:isExpanded}">

        <div class="list" style="padding-top: 0px !important;">
                <div ng-repeat="todo in todoItem" class="item item-checkbox border-item">
                    <label class="checkbox">
                        <input ng-model="todo.status"
                               ng-checked="todo.status"
                               ng-change="settodo(todo.id,todo.status)"
                               type="checkbox">
                    </label>
                    {{todo.topic}}
                </div>
        </div>

    </ion-content>
</ion-view>

.controller('TodoCtrl', function(
    $scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion
    ,$ionicPlatform, $cordovaBadge) {
    $scope.$parent.showHeader();
    $scope.$parent.clearFabs();
    $scope.$parent.setHeaderFab(false);
    $scope.$parent.hasShadow();

    $timeout(function() {
        $scope.isExpanded = false;
        $scope.$parent.setExpanded(false);
    }, 300);

    // สมมติข้อมูลตัวอย่าง เป็นตัวแปร array ของ object
    $scope.todoItem = [
        {id:1,topic:'รายการที่ต้องทำ 1',status:false},
        {id:2,topic:'รายการที่ต้องทำ 2',status:false},
        {id:3,topic:'รายการที่ต้องทำ 3',status:false},
        {id:4,topic:'รายการที่ต้องทำ 4',status:false},
        {id:5,topic:'รายการที่ต้องทำ 5',status:false}
    ];

    $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin

        // สร้างฟังก์ชั่นสำหรับนับรายการที่ยังไม่เช็คเลือก
        $scope.getNotComplete = function(){
            var totalNotComplate = 0;
            var item =   $scope.todoItem;
            // เนื่องจากตัวแปร $scope.todoItem ที่เรากำหนดเป็น array
            // ค่า k ใน ลูป for ด้านล่างจะ key index เริ่มตัวที่ 0
            for(var k in item){
                // ถ้ารายการนั้นมีสถานะเป็น false ให้บวกค่าเพิ่ม
                if(item[k].status == false){
                    totalNotComplate++;
                }
            }
            return totalNotComplate;
        };

        // ตรวจสอบการอนุญาตการแสดง badge
        $cordovaBadge.hasPermission().then(function(yes) {
            // เมื่อเริ่มต้นเข้ามาหน้านี้ ให้เรียกฟังก์ชั่น ดึงรายการที่ยังไม่เช็คทั้งหมด กำหนดเลขกำกับ
            var NotComplete = $scope.getNotComplete();
            $cordovaBadge.set(NotComplete).then(function() {
                // You have permission, badge set.
            }, function(err) {
                // You do not have permission.
            });
        }, function(no) {
            // You do not have permission
        });

        // สร้างฟังก์ชั่นสำหรับเรียกใช้เมื่อเปลี่ยนค่าใน checkbox ส่งค่า id และ status
        // มาด้วย โดยค่า status จะหมายถึงค่าสะานะของการเช็คเลือก
        $scope.settodo = function (id, status) {
            // ถ้าถูกเช็คเลือก จำนวนรายการที่ยังไม่เช็คก็จะลดลง
            if(status == true){
                // ให้ลดจำนวน ในที่นี้ใช้ decrease() ไม่กำหนดจำนวน จะเป็นการลดทีละ 1
                $cordovaBadge.decrease().then(function() {
                    // You have permission, badge decreased.
                }, function(err) {
                    // You do not have permission.
                });
            }else{ // ถ้าเช็คออก หรือ status การเปลี่ยนเป็น false
                // ให้เพิ่มจำนวน ในที่นี้ใช้ increase() ไม่กำหนดจำนวน จะเป็นการเพิ่มทีละ 1
                $cordovaBadge.increase().then(function() {
                    // You have permission, badge increased.
                }, function(err) {
                    // You do not have permission.
                });
            }
        };

    });

    ionicMaterialMotion.fadeSlideInRight();

    ionicMaterialInk.displayEffect();

})

// ลดค่า ตามคาตัวแปร count
$cordovaBadge.decrease(count).then(function() {
	// You have permission, badge decreased.
}, function(err) {
	// You do not have permission.
});

// เพิ่มค่า ตามคาตัวแปร count
$cordovaBadge.increase(count).then(function() {
	// You have permission, badge increased.
}, function(err) {
	// You do not have permission.
});

// เคลียร์ค่า
$cordovaBadge.clear().then(function() {
	// You have permission, badge cleared.
}, function(err) {
	// You do not have permission.
});

// ดึงค่าตัวเลขที่แสดงอยู่ปัจจุบัน
$cordovaBadge.get().then(function(badge) {
	// You have permission, badge returned.
}, function(err) {
	// You do not have permission.
});

C:\phonegap\learn005>phonegap build android