Отображение данных формы в пользовательской сетке при нажатии кнопки - PullRequest
Новая
       15

Отображение данных формы в пользовательской сетке при нажатии кнопки

0 голосов
/ 02 июля 2018

Я пытаюсь отобразить данные из входов динамической формы в пользовательском интерфейсе при нажатии кнопки. Сетка, кажется, рендерится, но не видна. Вот код:

index.html 

<code><!DOCTYPE html>
<html ng-app="app" id="ng-app">
<head>
  <title>Custom Filter</title>
  <link rel="styleSheet" href="style.css" />
  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
</head>
<body ng-controller="AppCtrl" ng-cloak="">
  <div class="container">
    <dynamic-form class="col-md-10" template="stdFormTemplate" ng model="stdFormData" style="margin: 20px">
    </dynamic-form>
  </div>
  <div class="col-md-4">
    <b>Form Result- </b><br>
    <pre>stdFormData: {{stdFormData | pretty}}

app.js 

angular.module('app', ['dynform', 'ui.grid'])
  .controller('AppCtrl', ['$scope', function($scope) {
    $scope.stdFormData = {};
    $scope.urlFormData = {};
    $scope.stdFormTemplate = [
      {
        "type": "text",
        "model": "text",
        "label": "text",
        "placeholder": "text"
      },
      {
        "type": "select",
        "model": "select",
        "label": "select",
        "empty": "nothing selected",
        "options": {
          "first": {
            "label": "first option"
          },
          "second": {
            "label": "second option",
            "group": "first group"
          },
          "third": {
            "label": "third option",
            "group": "second group"
          },
          "fourth": {
            "label": "fourth option",
            "group": "first group"
          },
          "fifth": {
            "label": "fifth option"
          }
        }
      },
      {
        "type": "date",
        "model": "fromdate",
        "label": "From Date",
        "placeholder": "From Date"
      },
      {
        "type": "date",
        "model": "todate",
        "label": "To Date",
        "placeholder": "To Date"
      },
      {
        "type": "submit",
        "model": "submit",
        "callback": "showgrid(stdFormData)",
        "label": "submit"
      },
      {
        "type": "reset",
        "model": "reset",
        "label": "reset"
      }
    ];
    $scope.showgrid = function(stdFormData) {
      console.log(stdFormData);
      var x = "<div ui-grid='{data:" + stdFormData + "}' class='myGrid'></div>";
      document.getElementById("demo").innerHTML = x;
    }
  }])
  .filter('pretty', function() {
    return function(input) {
      var temp;
      try {
        temp = angular.fromJson(input);
      } catch (e) {
        temp = input;
      }
      return angular.toJson(temp, true);
    };
  });

Функция showgrid () успешно вызывается при нажатии кнопки. Вот фрагмент консоли при нажатии кнопки.

Консоль Когда нажата кнопка. Объект в выводе консоли - это ввод формы, который требуется отобразить в сетке.

...