0

The context

I'm trying to make a simple form using angularjs to create some tables based on data in a database or data stored on S3. The flow of the form depends on whether the data comes from S3 or from a database. Based on the input of the first dropdown menu, other parts of the form become available until all information is given and the submit button can be pressed.

When the button is pressed the entire form is replaced by a chart or a table. To visualize the tables I'm using ui.grid.

I'm using angular together with ui.bootstrap and ui.router.

I added a simplified example on plunker.

Questions

  • Is this the way it's done, i.e. using $state.go to switch between a nested view/state to another upper level view/state (not necessary having a parent-child relationship)? Or are there other/better ways to do it? I'm new to angular and basically any web technology/framework, so if you have any remarks on how to do things more properly, these are welcome as well.

  • There's is however a second problem. The ui-grid table does not display correctly when using ui.router and $state.go to switch views. When I put the code directly in, i.e. not using ui.router then it displays fine. Answer: Apparently the <!DOCTYPE html> declaration is very important. Just adding that solves the issue and the table is shown properly. Basically not having the <!DOCTYPE html> breaks ui-grid

ddvlamin
  • 181
  • 1
  • 1
  • 14
  • I would suggest making a fiddle, get more help this way. Also, [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) – alphapilgrim Apr 11 '17 at 00:27
  • use a service to share data and methods across components/controllers. Far too much going on here for one question. Scale your questions down to much more specific single issues and one issue per question along with minimal amount of code needed to represent the issue – charlietfl Apr 11 '17 at 01:00
  • Simplifying it down to put the code on plunker really helped to find the issue, although it's one I've never encountered. The table wasn't displaying correctly because of the DOCTYPE declaration. I'll take a look at the services thing to see how this can help me do things more properly. So the $state.go is not the proper angular thing to do? – ddvlamin Apr 11 '17 at 11:11
  • See [rendering problems firefox and chrome - versus ](http://stackoverflow.com/questions/12870294/doctype-html-versus-html-rendering-problems-firefox-and-chrome) and [What happens in Quirks Mode?](http://www.cs.tut.fi/~jkorpela/quirks-mode.html). – georgeawg Apr 11 '17 at 17:12

0 Answers0