2-way binding (AngularJs)

by Alon Rotem

HTML

<h1>AngularJS implementation:</h1>
<div ng-app>
<form name="myForm">
  Enter your name: <input type="text" name="txtName" ng-model="name" required>
  <span id="mirror">Hello, {{name}}!</span>
  <div>
    <input type="button" id="btnUpdatetext" value="Update text" ng-click="name='Alon'"/>
  </div>
  <div>
  </div>
</form>
<h2>Form validation:</h2>
  <ul>
    <li><b>{{(myForm.txtName.$valid) ? "Name field is valid": "No name entered" }}</b></li>
    <li><b>Dirty:</b> {{myForm.$dirty}}</li>
    <li><b>Pristine:</b> {{myForm.$pristine}}</li>
    <li><b>Invalid:</b> {{myForm.$invalid}}</li>
  </ul>
  <div></div>
</div>
<br/><br/>
See <a href="https://jsfiddle.net/alrotem/y2w5eymu/" target="top">jQuery implementation</a>

CSS

body {
    font-family: arial;
    font-size: 12px;
}
* {
    margin-top: 5px;
    margin-bottom: 5px;
}
/* Validation classes */
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: white;
}

JavaScript

/* Look mom, no code!!! */
/* Note: 2-way binding means the UI auto-updates when the $scope changes too! */