Set the radio button in Angular to be checked on the first option

I recently created a dynamic form with data from an API, including an ng-repeat to generate multiple radio buttons. Everything is working well, but I'm struggling to set the first radio button as checked by default. Any suggestions or solutions would be greatly appreciated.

<div ng-repeat="carrier in options.shipping.methods">
    <fieldset>
        <input type="radio" id="{{ carrier.slug }}" name="{{ carrier.slug }}" value="{{ carrier.slug }}" ng-model="data.shipping" />
        <label class="radio" for="{{ carrier.slug }}">{{ carrier.description }}</label>
    </fieldset>
</div>

Would setting ng-init to $index == 0 work in this case?

javascriptangularjsapiradio-buttonangularjs-ng-repeat

Answer №1

When you require it, be sure to include the checked attribute using ngChecked on the input element.

For more information, visit this link

<div ng-repeat="carrier in options.shipping.methods">
    <fieldset>
        <input type="radio" id="{{ carrier.slug }}" name="{{ carrier.slug }}" value="{{ carrier.slug }}" ng-model="data.shipping"  ngChecked="carrier.isSelected" />
        <label class="radio" for="{{ carrier.slug }}">{{ carrier.description }}</label>
    </fieldset>
</div>

Within your controller, you will need to execute something like this

$scope.options.shipping.methods[0].isSelected = true;

Alternatively, you can directly include the condition within the ngChecked property

ngChecked="carrier.someProperty != null"

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

Loading data with React Router every time

I'm still getting the hang of React and React Router. On the home page (home component), data is loaded from the server via an AJAX request to display the information. However, when users navigate within the app using React Router and return to the ...

javascriptangularjsajaxreactjs

Retention of user-entered data when navigating away from a page in Angular

I need to find a way to keep the data entered in a form so that it remains visible in the fields even if the user navigates away from the page and then comes back. I attempted to use a solution from Stack Overflow, but unfortunately, it did not work as exp ...

javascriptangularjs

Send the JSON output to the controller function

Hello there! I am new to asp.net mvc and I'm looking for a way to pass JSonResult data to a controller method. In my View, I have set up a table like this: <table id="tbl_orderItems" class="table table-striped table-bordered table-hover dt-respo ...

javascriptasp.netjson

Step-by-Step Guide on Uploading a File with a Basic jQuery-AJAX Request

I'm in need of a straightforward client-side script for ajax file uploading. I searched the web for such a script, but all I found were plugins with numerous features. I just want a simple ajax file upload script. Is it possible to create something l ...

phpjavascriptjqueryajaxfile-upload

Using jQuery, effortlessly scroll a div to a specific vertical position of your choice

After referring to this previous question: Scrollpane on the bottom, css is hacky, javascript is hard I followed the same scrolling method as explained in the accepted answer. Now there's a new requirement to select a specific item (e.g., through a ...

javascriptjqueryscroll

Filtering an array dynamically by utilizing an array of conditions

Can jQuery-QueryBuilder be used to filter an array? This amazing plugin generates a unique array of conditions: condition:"AND" rules: { field:"name" id:"name" input:"select" operator:"equal" type:"string" value:"Albert" } I have ...

javascriptjqueryarrays

Determine the percentage of clicks on an HTML5 canvas radial progress bar

Recently, I designed a circular progress bar displaying a specific percentage. However, I am facing a challenge in determining how to calculate the percentage when a user clicks on either the black or green part of the circle. Could you provide insight on ...

javascriptjqueryhtmlcanvas

Retrieving the AngularUI slider's current value and establishing the default/starting value for ng-bind

Looking for ways to manipulate and calculate values from AngularUI sliders? Take a look at this sample code: <body ng-controller="sliderDemoCtrl"> <div ui-slider="{range: 'min'}" min="0" max="50" ng-model="demoVals.slider"& ...

angularjs

Looking to maintain the value of a toggle button in a specific state depending on certain condition checks

I have a situation where I need to keep a toggle button set to "off" if my collection object is empty. Previously, I was using v-model to update the value of the toggle button. However, now I am attempting to use :value and input events, but I am strugglin ...

javascripthtmlvue.js

Running Node.js code from npm within Swift can be achieved by following these steps:

I am looking to integrate a Node JS package downloaded from npm into my Cocoa App and run it using Swift. Despite searching online, I have not been able to find any information on whether it is possible to call an npm package from Swift. Can anyone help m ...

javascriptnode.jsswiftcocoanpm

Issue with loading Three.js asynchronously

My attempt to determine the maximum value of a point cloud data using the following code proved unsuccessful. import { PLYLoader } from "three/examples/jsm/loaders/PLYLoader"; let max_x = -Infinity; function initModel() { new PLYLoader().load ...

javascriptthree.js

Issues with implementing nested controllers for multiple $mdDialog windows in Angular Material

Apologies in advance if I am making a foolish mistake or overlooking some AngularJS logic. I am facing an issue with my custom $mdDialog which needs to open 2 different $mdDialog windows based on user selection. Everything works fine when the controllers a ...

angularjscontrollernestedangular-material

What is the best practice for using templates in a constructor versus connectedCallback?

Should I apply template in the constructor or connectedCallback of a custom element? In my experience, when I apply it in connectedCallback, sometimes attributeChangedCallback is called before and I can't query for elements. export class TestElement ...

javascriptweb-componentcustom-elementhtml5-template

Determine if an object hierarchy possesses a specified attribute

When passing a set of options as an object like this: var options={ sortRules:[ {...}, // rule 1 {...}, // rule 2 // etc. ], filterRules:[ {...}, // rule 1 {...}, // rule 2 // etc. ], etc ...

javascriptobjecthasownproperty

JQuery ID Media Queries: Enhancing responsive design with targeted

Is it possible to integrate a media query into the selection of an ID using JQuery? For example: $('#idname') $('@media (max-width: 767px) { #idname }') In essence, can you target the #idname with that specified media query in JQuery ...

javascriptjquerycss

Arranging multiple Label and Input fields in HTML/CSS: How to create a clean and

I'm struggling with HTML and CSS, trying to figure out how to align multiple elements on a page. I've managed to line up all the rows on the page, but for some reason, the labels are appearing above the input fields when I want them to appear be ...

javascriptjqueryhtmlcss

Manipulate objects within an array by updating state with a button in React

So, I have an array of names that I want to cycle through: const data = { names: [ { name: "Jordan" // additional data }, { name: "Holly" // additional data }, { name: "Sean" // additional data ...

javascriptarraysreactjsreact-hooks

Exploring Next.js dynamic imports using object destructuring

import { UDFCompatibleDatafeed } from "./datafeeds/udf/src/udf-compatible-datafeed.js"; I'm facing a challenge in converting the above import to a dynamic import in Next.js. My attempt was as follows: const UDFCompatibleDatafeed = dynamic(( ...

javascriptreactjswebpacknext.js

Prevent clicking here

I'm attempting to only prevent the click event on the current item with a certain class. $(document).on('click', '.item', function() { $(".item").removeClass('is-expanded'); $(this).addClass('is-expanded'); ...

javascriptjquery

Retrieve all elements from an array using jQuery

How do I extract all the elements from the array outside of the function? $.each(Basepath.Templates, function(i){ templateArray = new Array({title: Basepath.Templates[i].Template.name, src: 'view/'+Basepath.Templates[i].Template.id, descri ...

javascriptjqueryarrays