Javascript 单击按钮时在ui网格中显示表单数据_Javascript_Angularjs_Angular Ui Grid_Dynamicform

Javascript 单击按钮时在ui网格中显示表单数据

javascript angularjs

Javascript 单击按钮时在ui网格中显示表单数据,javascript,angularjs,angular-ui-grid,dynamicform,Javascript,Angularjs,Angular Ui Grid,Dynamicform,我试图在单击按钮时在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="stylesh

我试图在单击按钮时在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>


自定义过滤器
表单结果-

stdFormData:{{stdFormData|pretty}}

app.js

angular.module（'app'，['dynform'，'ui.grid']））
.controller（'AppCtrl'，['$scope'，函数（$scope）{
$scope.stdFormData={}；
$scope.urlFormData={}；
$scope.stdFormTemplate=[
{
“类型”：“文本”，
“模型”：“文本”，
“标签”：“文本”，
“占位符”：“文本”
},
{
“类型”：“选择”，
“模型”：“选择”，
“标签”：“选择”，
“空”：“未选择任何内容”，
“选择”：{
“第一”：{
“标签”：“第一选项”
},
“第二”：{
“标签”：“第二选项”，
“组”：“第一组”
},
“第三”：{
“标签”：“第三选项”，
“组”：“第二组”
},
“第四”：{
“标签”：“第四选项”，
“组”：“第一组”
},
“第五次”：{
“标签”：“第五选项”
}
}
},
{
“类型”：“日期”，
“模型”：“fromdate”，
“标签”：“起始日期”，
“占位符”：“起始日期”
},
{
“类型”：“日期”，
“模型”：“todate”，
“标签”：“迄今为止”，
“占位符”：“截止日期”
},
{
“类型”：“提交”，
“模型”：“提交”，
“回调”：“showgrid（stdFormData）”，
“标签”：“提交”
},
{
“类型”：“重置”，
“模型”：“重置”，
“标签”：“重置”
}
];
$scope.showgrid=函数（stdFormData）{
console.log（stdFormData）；
var x=“”；
document.getElementById（“demo”）.innerHTML=x；
}
}])
.filter（'pretty'，function（）{
返回函数（输入）{
无功温度；
试一试{
temp=角度。fromJson（输入）；
}捕获（e）{
温度=输入；
}
返回angular.toJson（temp，true）；
};
});

单击按钮时成功调用showgrid（）函数。下面是单击按钮时的控制台代码段

为什么要使用“文档”？您可以在index.html中声明ui网格，并使用ng if/ng show指令。该用例不允许我在html文件中进行任何更改。否则就不会有任何问题。

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);
    };
  });