Access the angular controller using the radio button option

Question

Access the angular controller using the radio button option

I am looking to showcase data in an HTML table retrieved from an Angular controller. I have the controller set up but I am unsure about how to display the data when a radio button is selected.

  <div class="radio">
    <label class="radio-inline"><input type="radio" name="top30Categories">TY Top 30 Categories</label>
    <label class="radio-inline"><input type="radio" name="top10Brands">TY Top 10 Brands</label>
    <label class="radio-inline"><input type="radio" name="top10Suppliers">TY Top 10 Suppliers</label>
  </div>

The table is enclosed within a "div" tag where I invoke another controller with additional data. This data gets displayed automatically when the page is loaded

<div class="panel panel-default" ng-controller="HttpGetTestController">

My goal is to exhibit different data in that HTML table depending on the selected radio button.

javascript angularjs

Answer 1

Answer №1

It seems like this is the solution you are looking for.

Check out this plunker, where each click on a radiobutton triggers an event.

Here is the HTML code:

<input type="radio" ng-click="radioButton(1)">
<input type="radio" ng-click="radioButton(2)">
<input type="radio" ng-click="radioButton(3)">

And here is the AngularJS code:

$scope.radioButton = function(arg){
    alert(arg);
    //Add your code here
}

Answer 2

It seems like this is the solution you are looking for.

Check out this plunker, where each click on a radiobutton triggers an event.

Here is the HTML code:

<input type="radio" ng-click="radioButton(1)">
<input type="radio" ng-click="radioButton(2)">
<input type="radio" ng-click="radioButton(3)">

And here is the AngularJS code:

$scope.radioButton = function(arg){
    alert(arg);
    //Add your code here
}

Access the angular controller using the radio button option

Answer №1

Similar questions

Navigating the PayPal In-Context response in AngularJS as opposed to NodeJS

Sliding through HTML content

Custom React component - DataGrid

Javascript's event.keyCode does not capture the Backspace or Delete keys in Internet Explorer

Issues persist with redirection when using AJAX and PHP in a login form, resulting in the user staying on the index page

JQuery Mobile applies X to all divs with the specified class

JavaScript enables logging on Android Emulator

Retrieve values from the query string (specifically from table rows and cells) for each individual line and display them in

Is there a way to locate child components without needing to designate the higher-order component encompassing them?

Converting a String to an Integer in JavaScript

Using index value as parameter in append function within angular js

Prevent page refresh when submitting a form using PureCSS while still keeping form validation intact

Using Angular to display exclusively the selected items from a list of checkboxes

Leveraging properties in computed Vue.js

Adjust the checked state of the checkbox based on the outcome of the promise's data

Move the placement of a slice on a pie chart using Three.js

Ideal selection for creating an authentic real-time audio application on android

Building a Dynamic Web Widget with the Perfect Blend of HTML, JS,

When the page is scrolled, the div is fixed in place and a class is dynamically added. Some issues may

What is the best way to import a file in meteor version 1.3?