<!DOCTYPE html>
<html ng-app="x">

<head>
  <meta charset="utf-8" />
  <title>UI.CodeMirror: Form demo</title>

  <script>
    document.write('<base href="' + document.location + '" />');
  </script>

  <!-- Le css -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

  <!-- Le codemirror things... -->
  <link rel="stylesheet" type="text/css" href="http://codemirror.net/lib/codemirror.css" />
  <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

  <div class="jumbotron">
    <div class="container">
      <h1>UI.CodeMirror: Form demo</h1>
    </div>
  </div>

  <section ng-controller="CodemirrorCtrl">
    <div class="container">

      <form name="myForm" role="form">
        <div class="form-group" ng-class="{'has-error' : !myForm.code.$valid }">
          <label class="control-label">Required javascript code : <span ng-show="myForm.code.$error.required">Enter something... anything!</span><br></label>
          <textarea name="code" ui-codemirror="cmOption" required ng-model="cmModel.field"></textarea>
          
        </div>
        <tt>cmModel = {{cmModel}}</tt>
        <br>
        <tt>myForm.code.$valid = {{myForm.code.$valid}}</tt>
        <br>
        <tt>myForm.code.$error = {{myForm.code.$error}}</tt>
        <br>
        <tt>myForm.$valid = {{myForm.$valid}}</tt>
        <br>
        <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt>
        </form>

    </div>
  </section>

<footer>
    <div class="container">
    <p>UI.CodeMirror version <a href="https://github.com/angular-ui/ui-codemirror/blob/v0.0.5/">0.0.5</a></p>
    </div>
</footer>
</body>

<!-- Le vendor... -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-codemirror/v0.0.5/ui-codemirror.js"></script>


<!-- Le codemirror things... -->
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>

<!-- Le custom js -->
<script src="app.js"></script>

</html>

var app = angular.module('x', ['ui.codemirror']);



/* =CodemirrorCtrl
 * Used for the demo
-----------------------------------------------------------------------------*/

app.controller('CodemirrorCtrl', ['$scope', function($scope) {
  
  // Initial code content...
  
  
  $scope.cmModel = "// JS";
  
  
  // The ui-codemirror option
  $scope.cmOption = {
    lineNumbers: true,
    tabMode: "indent",
    readOnly: 'nocursor',
    mode : 'javascript'
  };
}]);



.CodeMirror {  height: 100px; }


/* =TWBS HACK
-----------------------------------------------------------------------------*/

.jumbotron {
  position: relative;
  font-size: 16px;
  color: #fff;
  color: rgba(255,255,255,.75);
  text-align: center;
  background-color: #563d7c;
  border-radius: 0;
}
.jumbotron a{color : white;}

body > footer{
  margin-top : 5em;
  text-align: center;
}

# UI.CodeMirror: Form demo