Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ng-model-options in 5 minutes</title>
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,400,700">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  </head>
  <body ng-app="iLoveAngularᕕ( ᐛ )ᕗ<--dontDoThisNormally" ng-controller="ᕙ(⇀‸↼‶)ᕗCtrl<--orThis as vm">
    <h1>
      ng-model-options
      <small>
        in 5 minutes<br />
        with <a href="https://twitter.com/kentcdodds">@kentcdodds</a>
      </small>
    </h1>
    <hr />
    <div>
      <strong class="title">Form</strong>
      <form name="vm.lightsaberForm">
        <div class="form-group" ng-class="{'has-error': vm.lightsaberForm.fullName.$invalid && vm.lightsaberForm.fullName.$touched}">
          <label for="fullName" class="control-label">Full Name</label>
          <input name="fullName"
                 id="fullName"
                 type="{{::vm.inputType}}"
                 class="form-control"
                 ng-model="vm.user.fullName"
                 ng-model-options="vm.modelOptions"
                 required
                 ng-maxlength="25"
                 placeholder="{{::vm.inputType}}: required, minlength 5, maxlength 25"
                 minlength="5" />
          <div my-messages="vm.lightsaberForm.fullName"></div>
        </div>
      </form>
    </div>
    <hr />
    <strong class="title">Model State</strong>
    <div ng-if="!vm.showInternalVal">
      vm.user.fullName: <span ng-bind="vm.user.fullName"></span>
    </div>
    <div ng-if="vm.showInternalVal">
      <div>
        vm.user.fullName:
        <span ng-bind="vm.user.fullName()"></span>
        (getter/setter, must be invoked to get the value)
      </div>
      <div>
        vm.internalVal: <span ng-bind="vm.internalVal"></span>
      </div>
    </div>
    <hr />
    <strong class="title">Field ngModelController</strong>
    <pre>{{vm.getImportantStuff(vm.lightsaberForm.fullName) | json}}</pre>
    <hr />
    <small>
      Demo created by Kent C. Dodds
      for <a href="http://www.ng-conf.org/">ng-conf 2015</a>.
      <br />
      If you want to get serious about forms, use
      <a href="http://formly-js.github.io/angular-formly">angular-formly</a>
    </small>
    
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular-aria.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular-messages.js"></script>
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kentcdoddspro
0viewers