javascript - 单击按钮时在 ui-grid 中显示表单数据
问题描述
当单击按钮时,我试图在 ui-grid 中显示来自动态表单输入的数据。网格似乎呈现但不可见。这是代码:
索引.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>
应用程序.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() 函数在按钮单击时成功调用。这是单击按钮时的控制台片段。
解决方案
推荐阅读
- javascript - 检查对象数组中是否存在对象键,如果不存在则添加
- python - s3fs 突然停止在 Google Colab 中工作,出现错误“AttributeError: module 'aiobotocore' has no attribute 'AioSession'”
- pdf - PDF 输出中的半透明元素之间出现不需要的线条(使用 puppeteer 生成)
- javascript - 我如何在 Babylonjs 中自动旋转免费相机?
- android - 单元测试在一次运行时失败,但在我单独运行时通过
- css - 是否可以在悬停时转换 CSS 网格内单个项目的伪元素?
- r - 如何在 R Shiny 中的 SelectInput 选项中动态更新列名
- scroll - 如何通过拖动滚动条来滚动 EditText 的内容?
- vue.js - VueJS 路由器 - 使用子路由更改根目录中的命名视图
- c# - 等效于 C# .Net 中的 setPixels(int [] pixel, int offset, int stride, int x, int y, int width, int height)?