Auto Capitalize, begitulah saya menyebutnya. Sebenarnya metode ini hanya meng-uppercase karakter pertama saja. Kondisi di mana ingin menampilkan nama seseorang yang default-nya lowercase semua, dan ingin membuat setiap karakter pertama menjadi uppercase atau menjadi huruf kapital. Dan by the way, filter ini sering saya pakai. Contoh:

{
    name : 'muhammad chairul umam',
    gender : 'male'
}

saat memanggil name dan mem-binding-kan data tersebut ke model pada HTML, tentu hasil output-nya akan apa adanya.

JS:

angular.module('myApp').controller( 'SomeController', [
    '$scope', '$http',
    function($scope, $http) {

    $scope.userData = {
        name : 'muhammad chairul umam',
        gender : 'male'
    };

        /*
         *  STOP YOUR CODE HERE
         */
    }]
);



HTML:

<div>
    {{ userData.name }}
</div>



Output:

muhammad chairul umam

Maka, buat satu filter untuk yang akan dipakai untuk membantu kerja program:

angular.module('myApp').filter('capitalize', function() {
    return function(input, all) {
        var reg = (all) ? /([^\W_]+[^\s-]*) */g : /([^\W_]+[^\s-]*)/;
        return (!!input) ?
            input.replace(reg, function(txt){
                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
                }) :
            '';
    }
});

Silakan perhatikan dua parameter input dan all. parameter pertama adalah model pada HTML dan paremeter kedua digunakan saat ingin meng-uppercase semua karakter pertama dalam sebuat kalimat dalam model. bisa dipahami nggak bahasa saya? 😀

Penggunaannya cukup mudah:

JS:

angular.module('myApp').controller( 'SomeController', [
    '$scope', '$http',
    function($scope, $http) {

    $scope.userData = {
        name : 'muhammad chairul umam',
        gender : 'male'
    };

        /*
         *  STOP YOUR CODE HERE
         */
    }]
);



HTML:

<div>
    {{ userData.name | capitalize }}
</div>



Output:

Muhammad chairul umam

Perhatikan output. Penggunaan filter capitalize secara default hanya akan meng-uppercase huruf pertama pada kata pertama

JS:

angular.module('myApp').controller( 'SomeController', [
    '$scope', '$http',
    function($scope, $http) {

    $scope.userData = {
        name : 'muhammad chairul umam',
        gender : 'male'
    };

        /*
         *  STOP YOUR CODE HERE
         */
    }]
);



HTML:

<div>
    {{ userData.name | capitalize : true }}
</div>



Output:

Muhammad Chairul Umam

Perhatikan output. Penggunaan filter capitalize dengan parameter true akan meng-uppercase huruf pertama pada setiap kata.

Demo:

Mudah bukan?

Feel free to ask me or comment 🙂