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>
    
​
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
​
    <script src="//npmcdn.com/api-check@latest/dist/api-check.js"></script>
<script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
​
​
    <script src="//npmcdn.com/angular-formly@latest/dist/formly.js"></script>
​
    
    <script src="//npmcdn.com/angular-formly-templates-bootstrap@latest/dist/angular-formly-templates-bootstrap.js"></script>
​
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.min.js"></script>
​
    
​
  <body ng-app="formlyExample" ng-controller="MainCtrl as vm">
    
    
    
    <div>
      
      <form novalidate>
        <formly-form form="exampleForm" model="vm.model" fields="vm.fields">
    
        </formly-form>
      </form>
     
    </div>
​
​
    Model </br>
     {{vm.model}}
    
    <script type="text/ng-template" id="input-template.html">
      {{to.label}}
      <input type="{{options.templateOptions.type || 'text'}}"
           class="form-control"
           id="{{id}}"
           formly-dynamic-name="id"
           formly-custom-validation="options.validators"
           placeholder="{{options.templateOptions.placeholder}}"
           aria-describedby="{{id}}_description"
           ng-required="options.templateOptions.required"
           ng-disabled="options.templateOptions.disabled"
           ng-model="model[options.key]">
    </script>
    
​
  </body>
​
</html>
​
 
body {
  margin: 20px
}
​
.formly-field {
  margin-bottom: 20px;
}
​
.validation {
  position: absolute;
  font-size: .8em;
  color: #a94442;
}
​
.formly-template-wrapper {
  position: relative;
}
 
/* global angular */
(function() {
​
  'use strict';
​
  var app = angular.module('formlyExample', ['formly', 'ngMessages'], function config(formlyConfigProvider) {
    formlyConfigProvider.setType([
      {
        name: 'input',
        templateUrl: 'input-template.html'
      }
    ]);
    formlyConfigProvider.setWrapper([
      {// ng-mouseover="to.editorEnabled=true"
        template: [
          '{{to.focused}}',
                    '<div ng-hide="to.editorEnabled" >',
                        '<div ng-mouseover="to.editorEnabled=true">',
                            '{{to.label}}</br>',
                            '{{to.value}}',
                        '</div>',
                    '</div>',
                    '<div focus-me model="to.editorEnabled" focus="to.focused" ng-show="to.editorEnabled">',
                        '<formly-transclude></formly-transclude>',
                    '</div>'
                ].join(' ')
      }
    ]);
  });
  
  app.run(function(formlyConfig, formlyValidationMessages) {
   
  });
  
  app.directive('focusMe', function($timeout, $parse,$compile) {
  return {
    scope: {model:'=',
           focus:'='},
    link: function(scope, element, attrs) {
     
      var model = $parse(attrs.focusMe);
      attrs.focusMe=true;
      scope.model = false;//$('#hej').is(":focus");
               
      
  
      scope.$watch('focus', function(value) {
        console.log('value=',value);
​
          if(!scope.focus){
            scope.model=false;
          }
      });
      scope.$watch('model', function(value) {
        console.log('value=',value);
    
        if(value === true) { 
          $timeout(function() {
            element[0].firstElementChild.focus();
​
          });
        }
        
      });
    }
  };
});
​
​
  app.controller('MainCtrl', function MainCtrl(formlyVersion) {
    var vm = this;
​
 
​
    vm.model = {textField: "Mouse over this field"};
    
   
    vm.fields = [
      {
        key: 'textField',
        type: 'input',
        id:'hej',
        templateOptions: {
          label: 'Text',
          type: 'text',
          value:vm.model.textField,
          onBlur:'to.focused=false',
          onFocus:'to.focused=true',
          focused:'true'
         
        },
        watcher: {
          listener: function(field, newValue, oldValue, scope, stopWatching) {
            if(newValue) {
              if(!newValue || newValue === "") {
                field.templateOptions.value = "Undefined";
              }
              else {
                field.templateOptions.value = newValue;
              }
            }
          }
        }
      }];
    
    vm.originalFields = angular.copy(vm.fields);
​
​
  });
​
})();
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers