psyho/index.html

## index.html
<!DOCTYPE HTML>
<html xmlns:ng="http://angularjs.org">
  <head>
    <title>Inline Edit</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" type="text/javascript"></script>
    <script src="http://code.angularjs.org/0.9.18/angular-0.9.18.min.js" type="text/javascript" ng:autobind></script>

    <style type="text/css">
      .dirty {
        border: 1px solid #00AA00;
      }
    </style>

    <script type="text/javascript">
      angular.service('data', function() {
        var data = [];

        for(var i = 0; i < 100; ++i) {
          data.push({name: 'record '+i, id: i});
        }

        return data;
      });

      function FooController(data, $location) {
        this.data = data;
        this.$location = $location;

        this.$watch('$location.hashSearch.page', this.resetFragments);
      }
      FooController.$inject = ['data', '$location'];

      FooController.prototype = {
        resetFragments: function() {
          this.page = this.parsePage(this.$location.hashSearch.page);
          this.updatePage(this.page);
          this.masterFragment = this.data.slice(this.page * 10, (this.page+1)*10);
          this.fragment = angular.copy(this.masterFragment);
        },
        parsePage: function(page) {
          page = page || '0';
          page = parseInt(page, 10);
          if(page < 0) {
            page = 0;
          }
          if(page * 10 >= this.data.length) {
            page = Math.floor((this.data.length-1) / 10);
          }
          return page;
        },
        next: function() {
          this.updatePage(this.page + 1);
        },
        prev: function() {
          this.updatePage(this.page - 1);
        },
        updatePage: function(page) {
          this.$location.update({hashSearch: {page: page}});
        },
        save: function() {
          for(var i = 0; i < 10; ++i) {
            this.data[this.page * 10 + i] = this.fragment[i];
          }
          this.resetFragments();
        },
        isDirty: function(rowIdx, property) {
          return this.masterFragment[rowIdx][property] !== this.fragment[rowIdx][property];
        }
      };

      angular.directive('ng:mark-dirty', function(expression, element) {
        return function(element) {
          var scope = this;

          scope.$watch(expression, function() {
            var isDirty = scope.$eval(expression);
            element.toggleClass('dirty', isDirty);
          });
        }
      });

      function InlineEditController() {
        this.$editing = false;
      }

      angular.widget('@ng:inline-edit', function(expression, element) {
        var html = element.html();
        var replacementHtml = '<div ng:show="$editing">'+html+'</div>'+
          '<div ng:hide="$editing">{{'+expression+'}}</div>';
        element.html(replacementHtml);
        element.attr('ng:controller', 'InlineEditController');

        this.descend(true);
        this.directives(true);

        return angular.extend(function($document, element) {
          var scope = this;

          function setEditing(val) {
            return function() {
              scope.$editing = val;
              scope.$eval();
            }
          }

          element.click(function(e) {
            if (!scope.$editing) {
              setEditing(true)();
            }
            e.stopPropagation();
          });
          element.keyup(function(e) {
            if(e.keyCode === 13 || e.keyCode === 27) {
              setEditing(false)();
            }
          });
          element.find('input, textarea, select').blur(setEditing(false));
          $document.click(setEditing(false));
        }, {$inject: ['$document']});
      });
    </script>
  </head>
  <body ng:controller="FooController">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng:repeat="row in fragment">
          <td ng:inline-edit="row.id" ng:mark-dirty="isDirty($index, 'id')">
            <input type="text" ng:format="number" name="row.id" />
          </td>
          <td ng:inline-edit="row.name" ng:mark-dirty="isDirty($index, 'name')">
            <input type="text" name="row.name" />
          </td>
        </tr>
      </tbody>
    </table>
    <button ng:click="prev()">Prev</button>
    <button ng:click="next()">Next</button>
    Page: {{page}}
    <br/>
    <button ng:click="save()">Save</button>
  </body>
</html>
	<!DOCTYPE HTML>
	<html xmlns:ng="http://angularjs.org">
	<head>
	<title>Inline Edit</title>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" type="text/javascript"></script>
	<script src="http://code.angularjs.org/0.9.18/angular-0.9.18.min.js" type="text/javascript" ng:autobind></script>

	<style type="text/css">
	.dirty {
	border: 1px solid #00AA00;
	}
	</style>

	<script type="text/javascript">
	angular.service('data', function() {
	var data = [];

	for(var i = 0; i < 100; ++i) {
	data.push({name: 'record '+i, id: i});
	}

	return data;
	});

	function FooController(data, $location) {
	this.data = data;
	this.$location = $location;

	this.$watch('$location.hashSearch.page', this.resetFragments);
	}
	FooController.$inject = ['data', '$location'];

	FooController.prototype = {
	resetFragments: function() {
	this.page = this.parsePage(this.$location.hashSearch.page);
	this.updatePage(this.page);
	this.masterFragment = this.data.slice(this.page * 10, (this.page+1)*10);
	this.fragment = angular.copy(this.masterFragment);
	},
	parsePage: function(page) {
	page = page \|\| '0';
	page = parseInt(page, 10);
	if(page < 0) {
	page = 0;
	}
	if(page * 10 >= this.data.length) {
	page = Math.floor((this.data.length-1) / 10);
	}
	return page;
	},
	next: function() {
	this.updatePage(this.page + 1);
	},
	prev: function() {
	this.updatePage(this.page - 1);
	},
	updatePage: function(page) {
	this.$location.update({hashSearch: {page: page}});
	},
	save: function() {
	for(var i = 0; i < 10; ++i) {
	this.data[this.page * 10 + i] = this.fragment[i];
	}
	this.resetFragments();
	},
	isDirty: function(rowIdx, property) {
	return this.masterFragment[rowIdx][property] !== this.fragment[rowIdx][property];
	}
	};

	angular.directive('ng:mark-dirty', function(expression, element) {
	return function(element) {
	var scope = this;

	scope.$watch(expression, function() {
	var isDirty = scope.$eval(expression);
	element.toggleClass('dirty', isDirty);
	});
	}
	});

	function InlineEditController() {
	this.$editing = false;
	}

	angular.widget('@ng:inline-edit', function(expression, element) {
	var html = element.html();
	var replacementHtml = '<div ng:show="$editing">'+html+'</div>'+
	'<div ng:hide="$editing">{{'+expression+'}}</div>';
	element.html(replacementHtml);
	element.attr('ng:controller', 'InlineEditController');

	this.descend(true);
	this.directives(true);

	return angular.extend(function($document, element) {
	var scope = this;

	function setEditing(val) {
	return function() {
	scope.$editing = val;
	scope.$eval();
	}
	}

	element.click(function(e) {
	if (!scope.$editing) {
	setEditing(true)();
	}
	e.stopPropagation();
	});
	element.keyup(function(e) {
	if(e.keyCode === 13 \|\| e.keyCode === 27) {
	setEditing(false)();
	}
	});
	element.find('input, textarea, select').blur(setEditing(false));
	$document.click(setEditing(false));
	}, {$inject: ['$document']});
	});
	</script>
	</head>
	<body ng:controller="FooController">
	<table>
	<thead>
	<tr>
	<th>ID</th>
	<th>Name</th>
	</tr>
	</thead>
	<tbody>
	<tr ng:repeat="row in fragment">
	<td ng:inline-edit="row.id" ng:mark-dirty="isDirty($index, 'id')">
	<input type="text" ng:format="number" name="row.id" />
	</td>
	<td ng:inline-edit="row.name" ng:mark-dirty="isDirty($index, 'name')">
	<input type="text" name="row.name" />
	</td>
	</tr>
	</tbody>
	</table>
	<button ng:click="prev()">Prev</button>
	<button ng:click="next()">Next</button>
	Page: {{page}}
	<br/>
	<button ng:click="save()">Save</button>
	</body>
	</html>