Angularjs Inline Editable

test.html sayfamız:

<div ng-app="test" ng-controller="Ctrl">
     <table>
         <thead>
             <th>Name</th>
             <th></th>
         </thead>
         <tbody>
// ng-repeat ile task objemiz içerisindeki subtasks dizisi içerisinde dönüyoruz.
             <tr ng-repeat="subTask in task.subTasks" 
ng-include="getTemplate(subTask)">
             </tr>
         </tbody>
     </table>
// Edit edilmeden önceki çıktımızı oluşturan template'imiz.
     <script type="text/ng-template" id="display">
         <td>{{subTask.name}}</td>
         <td>
             <button ng-click="editsubTask(subTask)">Edit</button>
         </td>
     </script>
// "Edit" düzenleme yapacağımız ekran çıktımızı oluşturan template'imiz.
     <script type="text/ng-template" id="edit">
         <td><input type="text" ng-model="task.selected.name" /></td>
         <td>
             <button ng-click="savesubTask($index)">Save</button>
             <button ng-click="reset()">Cancel</button>
         </td>
     </script>
</div>

test.js sayfamız:

var test = angular.module("test", []);

test.controller("Ctrl",

function Ctrl($scope) {
     $scope.task = {
         subTasks: [{
             order: 1,
             name: "To-Do"
         }, {
             order: 2,
             name: "Do Today"
         }, {
             order: 3,
             name: "In Progress"
         }, {
             order: 4,
             name: "Done"
         }],
         selected: {}
     };

  // ng-include ile template getiriliyor.
     $scope.getTemplate = function (subTask) {
         if (subTask.order === $scope.task.selected.order) return 'edit';
         else return 'display';
     };
// selected objemize "angular.copy(subTask)" diyerek edit lenecek olan subTask'ın bir kopyasını atıyoruz.
     $scope.editsubTask = function (subTask) {
         $scope.task.selected = angular.copy(subTask);
     };
// Edit edildiğinde yapılan değişiklikleri düzenlenen subtask'a (editlenen subTask'ı index'// inden buluyoruz) "angular.copy($scope.task.selected)" ile atıyoruz.
// $scope.reset() fonksiyonu ile $scope.task.selected objemizin içini boşaltıyoruz.
$scope.savesubTask = function (idx) {
         $scope.task.subTasks[idx] = angular.copy($scope.task.selected);
         $scope.reset();
     };
// $scope.reset() fonksiyonu ile $scope.task.selected objemizin içini boşaltıyoruz.
$scope.reset = function () {
         $scope.task.selected = {};
     };
});

Örnek ekran çıktımız: