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;