seimin
/
itsm-whlg


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
							<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Quick Example</title>
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"/>
</head>
<body ng-app="app" ng-controller="MainCtrl as vm">
<div class="jumbotron text-center">
  <h1>angular-formly-templates-bootstrap</h1>
</div>
<div class="container">
  <div class="row">
    <formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form"></formly-form>
  </div>
  <div class="row">
    <h2>Model</h2>
    <pre>{{vm.model | json}}</pre>
  </div>
  <div class="row">
    <h2>Form</h2>
    <pre>{{vm.form | json}}</pre>
  </div>
  <div class="row">
    <h2>Original Fields</h2>
    <pre>{{vm.originalFields | json}}</pre>
  </div>
  <div class="row">
    <h2>Options</h2>
    <pre>{{vm.options}}</pre>
  </div>
</div>


<script src="node_modules/api-check/dist/api-check.js"></script>

<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-formly/dist/formly.js"></script>
<script src="dist/angular-formly-templates-bootstrap.js"></script>

<script>
  var app = angular.module('app', ['formly', 'formlyBootstrap']);

  app.controller('MainCtrl', function MainCtrl() {
    var vm = this;

    vm.model = {};
    vm.options = {};

    vm.fields = [
      {
        type: 'input',
        key: 'text',
        templateOptions: {
          label: 'First input',
          placeholder: 'It works!'
        }
      },
      {
        type: 'select',
        key: 'avenger',
        templateOptions: {
          label: 'Favorite Avenger',
          options: [
            {name: 'Iron Man', value: 'iron_man', gender: 'Male'},
            {name: 'Captain America', value: 'captain_america', gender: 'Male'},
            {name: 'Black Widow', value: 'black_widow', gender: 'Female'},
            {name: 'Hulk', value: 'hulk', gender: 'Male'},
            {name: 'Captain Marvel', value: 'captain_marvel', gender: 'Female'}
          ],
          groupProp: 'gender'
        }
      }
    ];

    vm.originalFields = angular.copy(vm.fields);
  });
</script>
</body>
</html>