<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <style> img { width:30px; height:30px; } </style> <div ng-app="myApp" ng-controller="myCtrl"> <h3>Görev Listem</h3> <table border="1" cellpadding="5"> <thead> <tr> <th>No</th> <th>Görev</th> <th>Gün</th> <th>Durum</th> <th></th> <th>İşlem</th> </tr> </thead> <tbody> <tr ng-repeat="item in items"> <td>{{$index + 1}}</td> <td>{{ item.gorev }}</td> <td>{{ item.gun }}</td> <td>{{ item.durum }}</td> <td> <div ng-switch on="item.durum"> <div ng-switch-when="Tamamlanmadı"> <img src="https://image.freepik.com/free-vector/red-green-ok-not-ok-icons_17-1106090017.jpg"/> </div> <div ng-switch-when="Devam Ediyor"> <img src="http://www.freeiconspng.com/uploads/ok-icon-png-23.png"/> </div> <div ng-switch-when="Tamamlandı"> <img src="http://www.freeiconspng.com/uploads/ok-icons-3-png-27.png"/> </div> </div> </td> <td><button ng-click="RemoveFunction($index)">x Kaldır</button></td> </tr> <tr> <td></td> <td><input type="text" placeholder="Görev..." ng-model="newItem.baslik"/></td> <td> <select ng-model="newItem.gun"> <option>Pazartesi</option> <option>Salı</option> <option>Çarşamba</option> <option>Perşembe</option> <option>Cuma</option> <option>Cumartesi</option> <option>Pazar</option> </select> </td> <td> <select ng-model="newItem.durum"> <option>Tamamlanmadı</option> <option>Devam Ediyor</option> <option>Tamamlandı</option> </select> </td> <td></td> <td><button ng-click="AddFunction(newItem)">+ Ekle</button></td> </tr> </tbody> </table> </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.items = [ {gorev:'AngularJS dersleri izlenecek',gun:'Pazartesi', durum:'Tamamlanmadı'}, {gorev:'E-Ticaret projesi teslim edilecek',gun:'Cumartesi', durum:'Devam Ediyor'}, {gorev:'Bankaya para yatırılacak',gun:'Pazar', durum:'Tamamlandı'}]; $scope.AddFunction = function(item) { $scope.items.push({gorev:item.baslik, gun:item.gun, durum:item.durum}); item.baslik = ""; item.gun = ""; item.durum = ""; }; $scope.RemoveFunction = function(index) { $scope.items.splice(index, 1); }; }); </script>