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
  • …
 
<html>
<head>
​
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
  
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-aria.js"></script>
  
  <title>Egghead Lesson by kentcdodds</title>
</head>
<body ng-app="app" ng-controller="MainCtrl as vm">
  <h1>Angular version: {{vm.angularVersion}}</h1>
  <h2>
    {{vm.lessonTitle || 'Angular Lesson'}}
    <small>by <a href="http://twitter.com/kentcdodds">@kentcdodds</a></small>
  </h2>
  <hr />
  
  <h2>Demo</h2>
  
  <form ng-init="vm.radio='1'">
    Input:<br /><input show-attrs ng-model="vm.input" />
    Textarea:<br /><textarea show-attrs ng-model="vm.textarea"></textarea>
    
    Radio:<br />
    <input name="myRadio" show-attrs type="radio" ng-model="vm.radio" value="1" />
    <input name="myRadio" show-attrs type="radio" ng-model="vm.radio" value="2" />
    
    Checkbox:<br /><input show-attrs type="checkbox" ng-model="vm.checkbox" />
    Range:<br /><input show-attrs type="range" ng-model="vm.range" min="0" max="25" />
    Hide/Show:<input type="checkbox" ng-model="vm.show" /><input show-attrs ng-show="vm.show" ng-model="hidden" />
    Invalid:<br /><input show-attrs type="email" ng-model="vm.email" />
    Required:<br /><input show-attrs ng-model="vm.required" required />
    Disabled:<input type="checkbox" ng-model="vm.disable" /><br /><button show-attrs type="submit" ng-disabled="vm.disable">Submit</button>
  </form>
  
</body>
</html>
 
var app = angular.module('app', ['ngAria']);
​
app.controller('MainCtrl', function MainCtrl() {
  'use strict'; 
  var vm = this;
  vm.angularVersion = angular.version.full;
  vm.lessonTitle = 'How to use the ngAria module';
  
});
​
app.directive('showAttrs', function() {
  return function(scope, el, attrs) {
    var pre = document.createElement('pre');
    el.after(pre); 
    scope.$watch(function() {
      var attrs = {};
      Array.prototype.slice.call(el[0].attributes, 0).forEach(function(item) {
        if (item.name !== 'show-attrs') {
          attrs[item.name] = item.value;
        }
      });
      return attrs;
    }, function(newAttrs, oldAttrs) {
      pre.innerText = JSON.stringify(newAttrs, null, 2);
    }, true);
  }
});
Output

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

Dismiss x
public
Bin info
zhentiwpro
0viewers