AngularJs basit bir örnek

Anlaşılıar basit kullanımlar ilk başlayanlar için.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<style>
div { margin:10px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>
var phonecatApp = angular.module('homeApp', []);

phonecatApp.controller('HomeController', function ($scope) {
$scope.name = "Merhaba";

$scope.fillList = function () {
$scope.listdivShow = true;
$scope.dataList = [{ 'id': '1', 'name': 'Cem Elma' }, { 'id': '2', 'name': 'Ege Karaağaç' }, { 'id': '3', 'name': 'Doğan Karaağaç' }];
};

$scope.addList = function () {
$scope.dataList.push({
'id': '1',
'name': 'Yeni Kayıt'
});
};

$scope.removeList = function (index) {
$scope.dataList.splice(index, 1);
};

});
</script>
<title>Index</title>
</head>
<body ng-app="homeApp">
<div ng-controller="HomeController">
<div>
<input type="text" ng-model="name" />  {{name}}
</div>

<div>
<input type="button" value="Kayıtları Getir" ng-click="fillList();" />
<div ng-model="listDiv" ng-show="listdivShow">
<ul>
<li ng-repeat="data in dataList">
<span>Name: {{data.id}}</span>
<span>Name: {{data.name}}</span>
<span><a ng-click="removeList($index);" href="">Sil</a></span>
</li>
</ul>
<p><a href="" ng-click="addList();">Yeni Ekle</a></p>
<p>Toplam Kayıt: {{dataList.length}}</p>
</div>
</div>

<div>
<table>
<tr><th>row number</th></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
</table>
</div>

</div>

</body>
</html>

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s