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 🙂