Displaying radio values in an Angular ng-repeat directive

I am new to Angular and facing difficulties in capturing the selected radio value when using ng-repeat. The documentation is a bit unclear on this matter. Any assistance or guidance would be highly appreciated.

<div ng-repeat="item in ed">
  <label for="{{item['code']}}">
    <input ng-change="getPlanTypes()" ng-model="ed" type="radio" id="{{item['code']}}" name="effective_date" value="{{item['code']}}">
    {{item['date']}} </label>
</div>

Although here is the controller, I am unsure of the correct approach to retrieve the selected radio value:

rates.controller('getEffectiveDates', 
    function($scope, $http, $location, myService, localStorageService) {
        myService.effective_dates().then(function(ed) {
        $scope.ed = ed; 
    });

    $scope.getPlanTypes = function() {
        console.log($scope.ed['code']); //This attempt is returning undefined
        localStorageService.add('code',$scope.ed['code']);
        $location.path("/plan-types");
    }       
});

Answer №1

Execute

ng-click="fetchMembershipTypes(item.type)"

Then, in your controller, retrieve the data

$scope.fetchMembershipTypes = function (type) {
    console.log(type);
}

Answer №2

http://jsfiddle.net/8GhjK/

The HTML code snippet

<div ng-app="myApp" ng-controller="getEffectiveDates">
<div ng-repeat="item in ed">
  <label for="{{item['code']}}">
      <input ng-click="getPlanTypes(item)" ng-model="ed" type="radio" id="{{item['code']}}" name="effective_date" value="{{item['code']}}"/>
    {{item['date']}} </label>
</div>
</div>

The JavaScript section

angular.module("myApp",[]).controller('getEffectiveDates', ["$scope", function($scope) {

    $scope.ed = [{code:'1',date:"test date 1"},{code:'2',date:"test date 2"}];

    $scope.getPlanTypes = function(selectedItem) {
        console.log(selectedItem["code"]); //Printing the selected item's code
    }       
}]);

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 it possible for certain text within a textbox to activate a jQuery event?

In the development of my MVC ASP.Net application, there is a requirement for users to fill out a form. Specifically, there is a text box where users must input the duration of their current employment. If the user indicates less than three years, an additi ...

There seems to be an issue with the Link component from react-router-dom when used in conjunction with

I am currently utilizing react-router-dom along with Material-ui My main objective is to create a clickable row in a table that will lead to a specific path. Here is the code snippet: .map(client => ( <TableRow key={client.id} component={Link} to ...

Issues encountered while sending HTML Form data to MySQL with Node JS

I have been experimenting with a basic html form to mysql using nodejs, but unfortunately it is not functioning as expected. The HTML file is named index.html and the Node.js file is called test.js. Below you can find my code: My HTML <!DOCTYPE html&g ...

Ensuring form input validity in real-time using jQuery's keyup event

I've been working on a form where the user can fill in an input and press enter to move to the next field. Although I have managed to get the functionality to show the next div, I am facing issues with validation... // Moving to next div on Enter ...

How can you customize the appearance of the filledInput component within a TextField component in Material UI?

I need some guidance on how to change the color of the FilledInput component within a TextField. Unlike InputProps, FilledInputProps are not directly accessible for styling with classes. Any suggestions on how I can customize the styling of the FilledInpu ...

Tips on transferring information from a component to an instance in Vue

My goal is to retrieve data from a component and transfer it to a variable within my root Vue instance. Vue Instance Configuration: new Vue({ el: '#root', data: { searchResultObject: '' }, methods: { // ...

Uploading with Javascript CORS consistently ends with an error event occurring

My current challenge is uploading a file to a server using JavaScript in compliance with the CORS specification. While there are numerous examples available online that successfully upload the file, I encounter an error as the final event being fired. Up ...

Use jQuery to easily update the background of an iFrame

I have implemented this code to store the background image selected from a dropdown menu labeled rds. This function also sets a cookie so that the chosen background persists even after the page is reloaded. The issue lies in the line containing $('da ...

Effortless pagination across various pages, utilizing diverse CSS selectors

I've integrated simple pagination into my website, but I've encountered a issue. My navigation consists of CSS tabs, each holding a unique pagination component. Here is the jQuery pagination code snippet: $(function(){ var perPage = 8; var open ...

Refresh client web pages with JSON data without using eval

I am currently working as a consultant on a web application that functions as a single page app. The main purpose of the app is to constantly fetch new json data in the background (approximately every minute) and then display it on the screen. Our clients ...

Removing an event from Fullcalendar

With the help of a post on StackOverflow, I managed to modify my select: method to prevent users from adding an event on a date before NOW. However, there is a drawback. When a user clicks on an empty time slot and the system displays an alert message, th ...

The value returned is undefined when using getStaticProps

Recently, while working on my project with Next.js, I encountered an issue where I was trying to access data but kept getting undefined. Below is the code snippet that I was working with: function Home({books}) { console.log(books) return <div>Home ...

Is there a way to set table column headers in ngGrid using values from another array?

The JSON I am working with is organized into 'headers' and 'rows'. For example: { "headers": ["id","timestamp from","blah1","blah2"], "rows": [["69517737","1416932540011285849","104220.00","170968251000.000: ...

Executing JavaScript code within a class object using ASP-VB

I'm looking to create a function that will show a Javascript-based notification. I already have the code for the notification, but I'm trying to encapsulate it in a class library as a function. However, I am unsure about what to return from the f ...

Mask the "null" data in JSON

I'm currently working with a JSON file and trying to display it in a bootstrap table. Check out the code snippet I've been using: $(document).ready(function(){ $.getJSON(url, function(data){ content = '<h1><p class="p1 ...

The AJAX Request has indicated that the entity provided is not in an accurate 'application/json' format. It seems to be missing or empty, leading to an error with a code of '400'

While attempting to create an AJAX request to submit users to an external API, I faced a problem that is hindering my progress. Since I'm more familiar with PHP than JS, I saw this as an opportunity to expand my knowledge in JavaScript. The approach ...

Callback is triggered after ng-if removes the directive from the scope

A scenario on my page involves an angular directive nested within ng-if. I've developed a service that features a function, let's name it functionX, capable of accepting a callback as an argument. Whenever the ng-if condition becomes true, the ...

What is the reason that the Angular foreach loop does not allow the use of break or return to exit the loop?

When I noticed that the Angular foreach loop is similar to the enhanced for loop in Java, I assumed I could use a break or return statement to exit the loop. However, I soon discovered that this wasn't possible. I'm curious about the reasoning be ...

Creating a buffered transformation stream in practice

In my current project, I am exploring the use of the latest Node.js streams API to create a stream that buffers a specific amount of data. This buffer should be automatically flushed when the stream is piped to another stream or when it emits `readable` ev ...

Having trouble with the functionality of JQuery drop feature?

As I delve into implementing drag and drop functionality with JQuery, I encounter a peculiar issue. I have set up 3 'draggable' divs and corresponding 3 'droppable' divs. The intended behavior is for each draggable element to be accepte ...