<!DOCTYPE html>
<html ng-app="x">
<head>
<meta charset="utf-8" />
<title>UI.Codemirror : demo </title>
<!-- Le css -->
<link rel="stylesheet" type="text/css" href="http://codemirror.net/lib/codemirror.css"/>
</head>
<body>
<!-- Le content... -->
<section ng-controller="CodemirrorCtrl">
<p>Non Repeating Version</p>
<div ui-codemirror="piecesOfCode[0].options" ng-model="piecesOfCode[0].code"></div>
<div ng-repeat="c in piecesOfCode">
<p>Code should be: {{c.code}}</p>
<div ui-codemirror="c.options" ng-model="c.code"></div>
</div>
</section>
<!-- Le vendor... -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/scheme/scheme.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://rawgithub.com/angular-ui/ui-codemirror/v0.1.2/ui-codemirror.js"></script>
<script src="app.js"></script>
</body>
</html>
var app = angular.module('x', ['ui.codemirror']);
app.controller('CodemirrorCtrl', ['$scope', function($scope) {
$scope.piecesOfCode = [
{
code: ";; Scheme code in here.\n" +
"(define (double x)\n\t(* x x))\n",
options: {mode: "scheme", lineNumbers: true, indentWithTabs: true}
},
{
code: '<!-- XML code in here. -->\n' +
'<root>\n\t<foo>\n\t</foo>\n\t<bar/>\n</root>',
options: {mode: "xml", lineNumbers: true, indentWithTabs: true}
},
{
code: '// Javascript code in here.\n' +
'function foo(msg) {\n\tvar r = Math.random();\n\treturn "" + r + " : " + msg;\n}',
options: {mode: "javascript", lineNumbers: true, indentWithTabs: true}
}
];
}]);