What I am attempting to achieve is:
- Retrieve data from a JSON file upon button click.
- Display the data in separate boxes, each one different for every element of the array. For instance, if the JSON provides 3 rows of data, there should be 3 distinct boxes displayed.
- Arrange the boxes in a grid of 2X2.
- Exactly how it's illustrated in this wireframe image Wireframe for foodcourts
I have easily accomplished Step 1. I'm able to generate boxes on button click but not in the desired layout shown in the image. Additionally, each time the button is clicked, the new content is added to the div. Any assistance would be greatly appreciated. Below is my code:
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Untitled Document
</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<style>
.shape{
text-align:center;
background-image:url(dark-triangles.png);
width:200px;
height:60px;
line-height:60px;
color:white;
margin:10px;
position:relative;
transition-property: background;
transition-duration: -10s;
transition-timing-function: linear;
}
/* Remaining CSS styles here...*/
</div>
</body>
</html>