How to create a tabular form with data in a blogger blog - Helpforbloggerz

Helping new bloggers find solution to their blog, series of tutorials To Help new bloggers. bloggers tricks, bloggers tips.

Sunday, 3 September 2017

How to create a tabular form with data in a blogger blog


Hey bloggers,

In the name blogging lots of problems arise,  but this often differ according  to the type of blog you're running. Some own a very simple blog, maybe just
about fashion blog or about fruit or something that's just ironically simple. 

But, no matter the type of blog you're running, you might have an article that you need to arrange some data statistically in a tabular form. That's tickling!  oh yes,  it is

Am writing a post on this just because i was in need of such months ago,  so i started finding here and there just to get the particular thing I want. But today I'll be giving out a "Angularjs code" that's suitable of performing the task, just for you to copy and paste the code where you want it and adjust to what exactly you want.

 So if you want to apply such, 

     Table

Name Age Mark
{{x.name}} {{x.age}} {{x.mark}}

You can make use of the following code below

<h1>Table</h1>

  <div ng-app="" ng-init='ar_val=[
{name:"Rajesh",age:"25",mark:"88"},
{name:"Reegan",age:"56",mark:"45"},
{name:"Sharanya",age:"25",mark:"78"},
{name:"Satheesh",age:"18",mark:"36"},
{name:"Jose",age:"16",mark:"90"},
{name:"Alean",age:"36",mark:"86"},
{name:"Michal",age:"19",mark:"67"},
{name:"Ganesh",age:"29",mark:"71"},
]'>

    <table border="1px">

      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Mark</th>
      </tr>

      <tr ng-repeat="x in ar_val">
        <td>{{x.name}}</td>
        <td>{{x.age}}</td>
        <td>{{x.mark}}</td>
      </tr>

    </table>


  </div>

  <script src="js/angular1.4.8.min.js"></script>
  

As simple as that. Adjust it the way you like. 

No comments:

Post a Comment