Angular Push ve Splice

Merhaba arkadaslar,

Angular ile listeye bir eleman ekleme ve bu listeden bir elaman çıkarma örnekleri yapacagız.

Daha öncede bahsettiğimiz gibi bir controller ve html sayfamız olacak buralarda kullandığımız şablonlar belli. Scope kullanmaktan kaçınıyoruz.

Bu örnekte ayrıca ng-repeat, ng-model ve ng-click i de görmüş olacağız.

HTML imiz; index.html
[sourcecode language=”html”]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>

<body>
<div ng-app="app">
<div ng-controller="MyController as myCtl">
<ul ng-repeat="name in myCtl.names">
<li>{{ name.first }}</li>
</ul>

<input type="text" ng-model="myCtl.name"/>
<button type="submit" ng-click="myCtl.addName()">Add</button>
</div>
</div>
</body>
</html>

[/sourcecode]

********************

JS i miz: script.js
[sourcecode language=”js”]
angular.module(‘app’, []);

function MyController() {
var vm = this;

vm.names = [{
first: "Thomas"
}, {
first: "Geferson"
}, {
first: "Jenny"
}, {
first: "Maria"
}, ];

vm.addName = function() {
vm.names.push({
first: vm.name
});
vm.name = ”;
};
}

angular.module(‘app’).controller("MyController", MyController);
[/sourcecode]
Projenin calışan halini aşağıda görebilir ve inceleyebilirsiniz;

Ornegimizi burada görebilirsiniz

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.