Form.io Data Binding

A simple example of how data binding works in Form.io.

by Travis Tidwell

HTML

<script src="https://rawgit.com/formio/ngFormio/develop/dist/formio-full.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/yesmeck/jquery-jsonview/master/dist/jquery.jsonview.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/yesmeck/jquery-jsonview/master/dist/jquery.jsonview.css">
<div ng-app="formApp" class='row'>
  <div class='col-sm-6 well' ng-controller="formController">
    <formio src="'https://examples.form.io/simple'" submission='submission'></formio>
  </div>
  <div class='col-sm-6'>
    <div id="jsonview"></div>
  </div>
</div>

JavaScript

angular.module('formApp', ['formio'])
  .controller('formController', function($scope) {
    $scope.submission = {data: {}};
    $scope.$watch('submission.data', function() {
      jQuery('#jsonview').JSONView($scope.submission);
    }, true);
  });