Merhaba arkadaşlar, bu yazımda sizlere ng-click ve ng-submit direktiflerini anlatacağım.
- ng-click => ngClick direktifi, bir öğeye tıklanıldığında özel davranış belirlememizi sağlar.
- ng-submit =>ngSubmit direktifi, form gönderildiğinde çalıştırılacak olan işlevi belirtir. Form bir işlem yapmazsa ng-submit, formun gönderilmesini önler.
Şimdi bir örnek üzerinde anlatalım:
İndex.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <script type="text/javascript" src="../../resources/js/angular.min.js"></script> <script type="text/javascript" src="app.js"></script> <link rel="stylesheet" href="../../resources/css/bootstrap.min.css"> </head> <body ng-app="uygulama" ng-controller="UygController"> <div class="container"> <div class="row" ng-repeat="person in persons" ng-click="removePerson(person)"> <h5>{{person.name}} {{person.surname}} => {{person.age}}</h5> </div> <div class="row"> <form ng-submit="addPerson()"> <table> <tr> <td>Ad:</td> <td><input type="text" name="name" ng-model="newPerson.name" class="form-control"></td> </tr> <tr> <td>Soyad:</td> <td><input type="text" name="name" ng-model="newPerson.surname" class="form-control"></td> </tr> <tr> <td>Yaş:</td> <td><input type="text" name="name" ng-model="newPerson.age" class="form-control"></td> </tr> <tr> <td> <input type="submit" value="Kaydet" class="btn btn-primary"></td> </tr> </table> </form> </div> </div> </body> </html> |
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
var app = angular.module('uygulama', []); app.controller('UygController', ['$scope', function($scope) { $scope.removePerson = function(person) { var removedPerson = $scope.persons.indexOf(person); $scope.persons.splice(removedPerson, 1); alert(person.name + " " + person.surname + " Silindi") } $scope.addPerson = function() { name = $scope.newPerson.name; surname = $scope.newPerson.surname; age = $scope.newPerson.age; $scope.persons.push({ name: name, surname: surname, age: age, rendered: true }) } $scope.persons = [{ 'name': 'Furkan', 'surname': 'Koç', 'age': 23, 'rendered': true }, { 'name': 'Osman', 'surname': 'Korucu', 'age': 22, 'rendered': false }, { 'name': 'Emre', 'surname': 'Öztürk', 'age': 24, 'rendered': true }, { 'name': 'Emirhan', 'surname': 'Akkoyunlu', 'age': 23, 'rendered': true } ] }]) |
Controllerımızın içerisinde persons adında bir nesne oluşturuldu. Persons nesnesinin name, surname, age vb özellikleri var. $scope nesnesi kullanılarak ilk atamalar yapılıyor.
|
1 2 3 |
<div class="row" ng-repeat="person in persons" ng-click="removePerson(person)"> <h5>{{person.name}} {{person.surname}} => {{person.age}}</h5> </div> |
ng-repeat direktifi sayesinde ekrana yazdırılıyor. Ng-click direktifi kullanılarak $scope nesnemizde bulunan removePerson() metoduna parametre olarak silinmek istenen nesne gönderiliyor ve siliniyor.
Form içerisinde ng-submit direktifi ile yine $scope nesnemizde bulunan addPerson() metodumuz çağrılıyor ve ng-model ile alınan verilerini form şeklinde submit ediyor ve kişi persons nesnemize ekleniyor.
Bu yazımda sizlere ng-submit ve ng-click direktiflerini anlatmış oldum diğer yazılarımda görüşmek üzere…
