How to retrieve the value of a specific radio button in an Angular controller

I'm running into an issue where I can't seem to access the value of a selected radio button in my Angular controller. The reportTypeId that I'm trying to use doesn't capture the value of the radio button. Can anyone help me pinpoint where I might be going wrong?

HTML

<div class="col-md-3">
     <input type="radio" ng-model="reportTypeRadio" value="reportType.reportTypeId"> 
     <a href="#reportTypeEntityList/{{reportType.reportTypeId}}">                    
       {{reportType.reportTypeLabel}}
    </a>
</div>

Controller

mdmApp.controller('Controller', function($scope, $http, $location, $routeParams) {

    $scope.reportTypeRadio = reportTypeId;

    $scope.viewReportTypeEntityList = function() {
        $location.path('/reportTypeEntityList/' +reportTypeId);
    }

});

Answer №1

The model value from the ngModel directive should be utilized in this scenario:

$scope.displayReportTypeEntities = function() {
    $location.path('/listReportTypeEntities/' + $scope.selectedReportType);
};

Answer №2

Success! After modifying my HTML code as shown below, everything started working smoothly. I switched from using 'value' to 'ng-value', and added $parent in ng-model to properly utilize the parent scope of the ng-repeat directive.

<div class="col-md-3">
 <input type="radio" ng-model="$parent.selectedType" ng-value="type.typeId"> 
 <a href="#entityList/{{type.typeId}}">                    
   {{type.label}}
</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to emphasize my navigation using a call-to-action (CTA)?

My CTA is set up like this: <div class="heading__link"> <a class="heading__cta" href="#about">View my work</a> </div> Additionally, my navigation bar is structured like this: <nav id=&quo ...

What is the maximum size limit for a MongoDB array when using $addToSet?

Need to: db.collection('users').update( { "_id": user._id}, { "$addToSet": { "keywords.RFD": keywords } }, function(err, result) { if (err) { console.log( 'failed to add keyword "%s" for ...

Format the date using the Datepicker

I am looking to update the date format in my date picker from "12/25/2022" (for example) to "25/December/2022" Here is the code I have: $(".date-picker").datepicker({ format: 'dd-mm-yyyy', minDate: 0, numberOfMonths: \[3,1&b ...

Discover if every single image contains a specific class

HTML : <div class="regform"><input id="username" type="text" name="username" placeholder="Username" required><h3 class="check"><img src=''/></h3></div> <div class="regform"><input id="password" type=" ...

The Mui data grid is displaying a NaN value for the row number

import React, { useState, useEffect } from "react"; import axios from "axios"; import io from "socket.io-client"; import { DataGrid } from "@mui/x-data-grid"; import NaveBar from "../NaveBar/NaveBar"; import SideBar from "../SideBar/SideBar"; import ...

What is the method to target buttons using ID instead of index values?

I need advice on how to change the background-color of buttons using their IDs instead of index for better maintenance. Do you have any suggestions? Take a look at the code snippet below or run it from this jsfiddle: https://jsfiddle.net/p6kuf0zv/4/ // ...

In what way can I fill out my search fields using the criteria included in the URL?

In the process of developing an asp.net web application, I have implemented a code snippet to construct a section for search fields. This code builds URL parameters based on user input: <script type="text/javascript> $(document).ready(function(){ ...

Activate the ajax function using a specific reference

I have been working on creating an ajax function that contains all the data inside the variable called $item within the following function: public function handleAjaxData(&$item,&$params,$limitstart) { $view = JRequest::getVar('view' ...

How can I make v-for display additional profiles to achieve an infinite scroll effect?

Hey there! I've got a Firestore database set up to fetch profiles and display them on a page using v-for. I want to implement infinite scroll for a smoother user experience. Here's the JavaScript composable code I'm working with: import { pr ...

Exploring the possibilities of ASP.NET paired with HTML5 web storage

I am currently working on an application and I have a feeling that utilizing html5 web storage, specifically localstorage, could greatly benefit me. However, the implementation is proving to be more challenging than anticipated. It's possible that my ...

Using `appendChild` in combination with `createElement`

Is there a difference between these two approaches: var div = document.createElement('div');//output -> [object HTMLDivElement] document.getElementById('container').appendChild(div); and: var div = '<div></div>&a ...

How can I fetch a value from a database and set it as the selected option in a

I am facing an issue with the usage of the selectpicker plugin from Bootstrap in order to select multiple items. My requirement is to create a modal for editing where the data is fetched from previous records, particularly an array. I am looking for a way ...

Tips for triggering jquery code when a variable containing a CSS attribute is modified

I have a specific requirement where I need to reset the scrollleft value to 0 on my wrapper whenever a particular CSS property changes. Although I am new to using jQuery and haven't worked with variables much, I believe I need to create a variable to ...

Screen Tearing in Threejs Custom Shader Implementation

For my tilemap implementation using Threejs and the custom shaders by Brandon Jones found here, I am utilizing a THREE.Plane geometry for each layer. The face of the plane is painted with the following vertex and fragment shaders: Vertex Shader: var tile ...

Perform Action Only When Clicking "X" Button on JQuery Dialog

I have a dialog box with two buttons, "Yes" and "No", which trigger different functions when clicked. $('#divDialog').dialog({ modal:true, width:450, resizable: false, buttons: [{ text: 'Yes', ...

Troubleshooting: Mobile Browser Compatibility Issue with Nested Views in Angular-UI Router

For my application, I am utilizing angular ui-router, however, the nested views are only loading for desktop browsers and Chrome for Android. Other mobile browsers like Chrome for iPhone, Samsung Browser for Android, and Safari for iPhone do not show the n ...

What is the process through which React form elements receive the event parameter?

I'm currently working on a form component that looks like this: import React from 'react'; class CommentBox extends React.Component { constructor(props) { super(props); this.state = { value: '' } this.han ...

Discover the magic of Google Charts with the ability to showcase HTML source code within tooltips

I am attempting to show a Pie Chart using Google Charts with HTML in the tooltips, but I am encountering an issue where the HTML source is visible. I have tried setting html:true on the data column and tooltip.isHtml in the options, but I am unsure of what ...

Exploring the dynamic loading of JavaScript functions with Ajax in Dojo while passing arguments

Currently, I am working on implementing a require/load function that handles the retrieval and execution of remote JavaScript code. The function is functioning well, but I have been using a workaround to pass arguments by setting global variables. However, ...

Enhancing a simple HTML 5 project by integrating JS dependencies with minimal recompilation or processing

If I have a collection of .html, .css, and .js files that I am serving as static resources via a web server. There are countless JS packages available on NPM repository. I am curious about the process of packaging these libraries (downloading and extra ...