Update data from html table using angular js and radio button

Question

I have an HTML table with some data that is coming from a web service and I'm using Angular, then I have 3 radio buttons to display the top 10, 20 and 30 records from my data source. The 3 buttons should call a web service for each one, the web services are already working but I don't know how to make those radio buttons to display the new data in the table, the structure of that table doesn't change and because I'm using Angular I can avoid refreshing the whole page.

Does any one have an example for this?

My table is in a differente div with its own controller that displays some data:

<div ng-controller="ctrlOne">
  <table>
   <tr ng-repeat="d in data">
    <td>{{d.field1}}</td>
   </tr>
  </table>
</div>

In another div I have my radio buttons:

   <div class="radio">
    <label class="radio-inline"><input type="radio" name="top30">TY Top 30 Categories</label>
    <label class="radio-inline"><input type="radio" name="top20">TY Top 20 Brands</label>
    <label class="radio-inline"><input type="radio" name="top10">TY Top 10 Suppliers</label>
   </div>

No controller yet.

Brian Baker · Accepted Answer · 2016-01-12 22:47:54Z

1

You can use the radio group to select the data model like this..

 <div class="radio">
  <label class="radio-inline"><input type="radio" ng-model="tableVal" value="data10">Show top 10</label>
  <label class="radio-inline"><input type="radio" ng-model="tableVal" value="data20">Show top 20</label>
  <label class="radio-inline"><input type="radio" ng-model="tableVal" value="data30">Show top 30</label>
</div>  
<table ng-if="tableVal === 'data10'">
 <tr ng-repeat="d in data10">
  <td>{{d}}</td>
 </tr>
</table>

<table ng-show="tableVal === 'data20'">
 <tr ng-repeat="d in data20">
  <td>{{d}}</td>
 </tr>
</table>

<table ng-show="tableVal === 'data30'">
 <tr ng-repeat="d in data30">
  <td>{{d}}</td>
 </tr>
</table>

A sample of your dataset in controller:

app.controller('MainCtrl', function($scope) {
  $scope.tableVal = 'data10'
  $scope.data10 = ['10-first','10-second','10-third','10-fourth'];
  $scope.data20 = ['20-first','20-second','20-third','20-fourth'];
  $scope.data30 = ['30-first','30-second','30-third','30-fourth'];
});

edited Jan 12, 2016 at 22:47

answered Jan 12, 2016 at 4:30

Brian Baker

9961 gold badge6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

kennechu Over a year ago

Thank's for your time! Let me try and see if I have any question :)

kennechu Over a year ago

The three web services should be declared inside the $watch? @BrianBaker

Brian Baker Over a year ago

It depends on what you want to do. Are you going to get the whole model on page load and filter with the radio buttons or call the respective webservice when a radio button is pushed?

kennechu Over a year ago

Actually what I'm doing to avoid performance issues is to load the three web services at the same time, I create three tables because the structure of the data change so I want to hide the first two and then hide depending on my radio button selection.

Brian Baker Over a year ago

Updated answer to reflect dynamically showing tables

|

Collectives™ on Stack Overflow

Update data from html table using angular js and radio button

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related