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 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>
​
 
/* 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([
      {
        template: [
                    '<div ng-hide="to.editorEnabled" >',
                        '<div ng-mouseover="to.editorEnabled=true">',
                            '{{to.label}}</br>',
                            '{{to.value}}',
                        '</div>',
                    '</div>',
                    '<div ng-show="to.editorEnabled" ng-mouseleave="to.editorEnabled=false">',
                        '<formly-transclude></formly-transclude>',
                    '</div>'
                ].join(' ')
      }
    ]);
  });
  
  app.run(function(formlyConfig, formlyValidationMessages) {
​
  });
​
​
  app.controller('MainCtrl', function MainCtrl(formlyVersion) {
    var vm = this;
​
 
​
    vm.model = {textField: "Mouse over this field"};
    
    
    vm.fields = [
      {
        key: 'textField',
        type: 'input',
        templateOptions: {
          label: 'Text Label',
          type: 'text',
          value:vm.model.textField
        },
        watcher: {
          listener: function(field, newValue, oldValue, scope, stopWatching) {
            if(newValue) {
              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