AngularJS : Angular Event
Mahir Koding – Membuat sebuah apps yang full interaksi merupakan point yang sangat penting sebagai seorang developer. Sebisa mungkin, rancanglah apps tersebut menjadi lebih “aktif” dan fleksible. Di AngularJS, kamu bisa mengatur event-event tertentu untuk meninvoke terjadinya eksekusi program. Berikut adalah beberapa directive-directive yang dapat digunakan sebagai event listener :
- Ng-blur
- Ng-change
- Ng-click
- Ng-copy
- Ng-cut
- Ng-dblclick
- Ng-focus
- Ng-keydown
- Ng-keypress
- Ng-keyup
- Ng-mousedown
- Ng-mouseenter
- Ng-mouseleave
- Ng-mousemove
- Ng-mouseover
- Ng-mouseup
- Ng-paste
Berikut adalah sample program untuk menginput tag/kategori dengan tanda koma sebagai pemisah. Tag yang telah diinput juga bisa diremove ketika diclick.
Style CSS :
<style type="text/css">
.result{
max-width: 400px;
height: 200px;
box-sizing: border-box;
padding: 5px;
}
.result span{
cursor: pointer;
}
.input{
max-width: 400px;
border: 1px solid #000;
box-sizing: border-box;
padding: 10px;
}
.input input{
padding: 5px;
width: 80%;
}
</style>
View :
<body ng-app="myApps" ng-controller="boxCtrl">
<div class="input">
<input ng-keyup="check($event)" type="text" ng-model="tag" placeholder="Input tag and separate it with comma">
</div>
<div class="result" style="background-color: rgb({{ r+','+g+','+b }}) ">
<span ng-click="remove($index)" ng-repeat="tag in tags">{{ tag + ", " }}</span>
</div>
</body>
<script type="text/javascript" >
var app = angular.module("myApps", []);
app.controller("boxCtrl", function($scope){
$scope.changeColor = function(){
$scope.r = Math.floor(Math.random()*255);
$scope.g = Math.floor(Math.random()*255);
$scope.b = Math.floor(Math.random()*255);
};
$scope.tags = [];
$scope.check = function(keyCode){
if(keyCode.which==188){
$scope.tag = ($scope.tag+ '').substr(0, ($scope.tag+ '').length-1);
$scope.tags.push($scope.tag);
$scope.tag = "";
}
}
$scope.remove = function(index){
$scope.tags.splice(index, 1);
$scope.changeColor();
}
$scope.changeColor();
});
</script>
Jika ada pertanyaan yang kurang jelas silahkan berkomentar di bawah. Atau, jika ingin request tutorial juga dapat ke halaman ini. Dukung terus Mahir Koding agar dapat selalu mengupdate artikel dengan share dan like artikel ini. Terima Kasi
