angular

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


<!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>

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

JS i miz: script.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);

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