Diff filter for angular.js. Show inline text diff in your page
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.
 
Go to file
Chakib Benziane c4bc6b70ac Update bower.json 9 years ago
src Minor fix: don't pollute the global namespace 9 years ago
tests Make it return safe html 10 years ago
.gitignore Init files 10 years ago
.jshintrc Init files 10 years ago
LICENSE Initial commit 10 years ago
README.md Minor edits to README 10 years ago
angular-diff.js Minor fix: don't pollute the global namespace 9 years ago
angular-diff.min.js Minor fix: don't pollute the global namespace 9 years ago
bower.json Update bower.json 9 years ago
gulpfile.js Init files 10 years ago
karma.conf.js Rename karma config file 10 years ago
package.json Minor fix: don't pollute the global namespace 9 years ago

README.md

angular-diff

Diff filter for angular.js. Show inline text diff in your page

I took the idea and the algorithm (and the code) from http://ejohn.org/projects/javascript-diff-algorithm/

Install

To use angular-diff you have to:

  1. install angular-diff with bower:

    bower install angular-diff

  2. In your index.html, include the angular-diff file

In your module declaration you have to include the diff module

var module = angular.module('yourModule', [
    ...
    'diff',
]);

USAGE

It's a filter, you use it in your html like this:

<div ng-bind-html="oldText|diff:newText"></div>

This will show the diff between oldText and newText

Note that the filter returns html with <ins> and <del> tags, so in order to display it you have to use ng-bind-html.

Here's a demo, that's worth more than a thousand words:

http://plnkr.co/edit/nfhA5g?p=preview

DEVELOPMENT

Remember to install all dependencies:

$ npm install -g gulp  // It's like grunt but cooler
$ npm install
$ bower install

To launch tests simply run

gulp karma

To build and minify simply run

gulp build