Question

我试图在单击按钮时在ui网格中显示来自动态表单输入的数据。网格似乎可以渲染，但是不可见。这是代码：

index.html

<!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}}</pre><br>
  </div>
  <div id="demo"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js">
  </script>
  <script src="http://ui-grid.info/release/ui-grid.js"></script>
  <script src="../dynamic-forms.js"></script>
  <script src="app.js"></script>
</body>
</html>

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（）函数。这是单击按钮时的控制台代码段。

Console When button is clicked. The object in the console output is the form input which is desired to be shown in the grid.

单击按钮即可在ui-grid中显示表单数据

0 个答案: