<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <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>İşlem</th> </tr> </thead> <tbody> <tr ng-repeat="item in items"> <td ng-show="isSelected(item)">{{$index + 1}}</td> <td ng-show="isSelected(item)"><input type="text" placeholder="Görev..." ng-model="EditingItem.gorev"/></td> <td ng-show="isSelected(item)"> <select ng-model="EditingItem.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 ng-show="isSelected(item)"> <select ng-model="EditingItem.durum"> <option>Tamamlanmadı</option> <option>Devam Ediyor</option> <option>Tamamlandı</option> </select> </td> <td ng-show="isSelected(item)"> <button ng-click="SaveFunction(EditingItem, $index)">Kaydet</button> <button ng-click="CancelFunction()">İptal</button> </td> <td ng-if="!isSelected(item)">{{$index + 1}}</td> <td ng-if="!isSelected(item)">{{ item.gorev }}</td> <td ng-if="!isSelected(item)">{{ item.gun }}</td> <td ng-if="!isSelected(item)">{{ item.durum }}</td> <td ng-if="!isSelected(item)"> <button ng-click="EditFunction(item)">Düzenle</button> <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><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.SaveFunction = function(item, index){ $scope.items[index] = {gorev:item.gorev, gun:item.gun, durum:item.durum}; } $scope.RemoveFunction = function(index) { $scope.items.splice(index, 1); }; $scope.isSelected = function(row){ if(row == undefined) return false; return $scope.selected_row===row; } $scope.EditFunction = function(row){ $scope.EditingItem = row; $scope.selected_row=row; } $scope.CancelFunction = function(row){ $scope.selected_row=null; } }); </script>