Setting a default checked radio button option in Angular

I'm looking to have a default radio button option checked, but so far my attempts with ng-model and ng-init haven't been successful.

Here's my HTML:

<div bindonce ng-repeat="row in results.favorites" style="padding: 0px 10px; white-space: nowrap; border-bottom: 1px solid #efefef; border-top: 1px solid #eee;  border-left: 1px solid #efefef;">
    <input type="radio" ng-click="setFavoriteDashboard(row.id)" ng-model="selectedRow" name="favRadioSel" style="opacity: 1;" class="pointer"/>
    <span bo-text="row.title" style="margin: 10px; position: relative; top: 3px;"></span>
</div>

https://i.sstatic.net/H8tYn.png

This is my JS:

$scope.results = {
  favorites: [{
    id: "WatchList1",
    title: "WatchList1"
  }, {
    id: "WatchList2",
    title: "WatchList2"
  }, {
    id: "WatchList3",
    title: "WatchList3"
  }]
};
$scope.selectedRow = "WatchList1";

Check out the demo here: http://plnkr.co/edit/KA9HyQ3bHxJo2Cm9qFm3?p=preview

javascriptangularjs

Answer №1

Take a look at the live demonstration here: Demo.

Instead of utilizing ng-value="{{row.id}}", opt for ng-value="row.id".

We recommend reviewing the documentation on ngValue: 

<input
  [ng-value="string"]>
...
</input>

Answer №2

Assign $scope.selectedRow with the value of $scope.results.favorites[0].id and swap out ng-value for value.

Explanation: The radio button's value is set to the id while ng-model is set to selectedRow, based on your plunker example. This means that by setting selectedRow to the id of the first element in the array, you can make it the default selection.

Visit plunker

Answer №3

To access the parent scope variable selectedRow within an ng-repeat, use $parent as ng-repeat creates a child scope. Also, make sure to utilize the ng-value attribute value without interpolation.

Code Sample

<input type="radio" 
 ng-model="$parent.selectedRow" 
 ng-value="row.id" name="favRadioSel" 
 style="opacity: 1;" 
 class="pointer" />

Link to Working Plunkr Example

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

What is the best way to retrieve the errors recorded property from a customized input component that has been validated with vee-validate?

I am currently exploring the use of VeeValidate within a custom input component. In my attempts, I have experimented with using $emit on both @input and @blur events. However, I have encountered an issue where validation takes place in the next tick, caus ...

javascriptvalidationvue.jsvuejs2vee-validate

The error message "TypeError ".deploy" is not a function in your Hardhat environment."

Currently, I'm in the process of developing a page for minting NFTs called astro-mint. To move forward, I need to deploy my contract using hardhat. However, when I execute this command npx hardhat run scripts/deploy.js --network dexitTestnet An erro ...

javascriptnode.jshardhat

Utilizing the splice method across multiple instances of a string

When facing a string like "This website is blocked by administrator. Please get the admin permissions. You will be allowed only if permission is granted" that needs to be split into three lines for better readability, one solution is using the splice metho ...

javascript

Transcode Byte Array into Base64 String Using AngularJS

I am receiving a byte array in the service response, and I need to display that image in an image field on my HTML page. Can anyone provide guidance on how to implement this? I have searched for solutions on Stack Overflow but have not found a valid soluti ...

javascriptangularjscordovabase64arrays

The functionality of the button is affected when it is placed on the same line as a h1 heading

My goal is to have the page title and profile button aligned on the same line in the header of each page. However, I've encountered an issue where the button doesn't function properly when placed on the same line but works fine when separated ont ...

javascripthtmlcssreactjsweb-applications

Execute functions in a random order

My array contains a series of functions and is structured as shown below: var all_questions = [ show_question(1, 1), show_question(2, 1), show_question(3, 1), ]; I'm interested in executing those functions within the array in a random or ...

javascriptjqueryarrays

Encountered an error in React JS and Axios when attempting to select a form: "Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'."

I'm encountering an issue while attempting to send FormData using Axios within a React JS application. The form should include both text inputs and multiple file uploads. However, when I tried to select the form with querySelector, it doesn't app ...

javascriptnode.jsreactjsaxios

Responsive components become concealed if there is limited space available

I'm struggling with figuring out what to write exactly. I have 4 boxes each with a width of 300px. If the document width is around 600px, then only 2 boxes should remain visible on the page while the others are hidden. Is there a way to make this dyn ...

javascriptjquerycssdynamicresponsive

Can the chosen date in a calendar date picker be linked to a variable that is accessible to a separate file?

Currently, I am developing a React application and have integrated a date picker feature using Ant Design to enable users to select a date range. My goal is to store the selected date value into a variable that can be accessed by another file in my progr ...

javascriptreactjsantd

How can I best access the object being exposed on the webpage using <script type="text/json" id="myJSON">?

In our current project, we are successfully using AMD modules to organize and structure our code. One idea I have is to create an AMD module that accesses a script tag using a jQuery ID selector and then parses the content into JSON format. Here's an ...

javascriptjqueryjsonunderscore.js

Are there any customizable actions available for the `yarn remove [package]` command, such as post-installation hooks?

I must execute a script following the completion of the following commands: yarn add [package] yarn remove [package] yarn upgrade [package] yarn install postinstall gets triggered after yarn add, yarn upgrade, and yarn install. However, it doesn't s ...

javascriptnode.jsyarnpkg

Babeljs encountered an error: TypeError - The super expression should be a function or null, not undefined

Currently, my project involves implementing multiple-files inheritance in ES6 using Node.js and Babel. Babel is used to convert the ES6 code to ES5 since Node does not fully support ES6 yet. Import/export statements are used to connect the different files ...

javascriptnode.jsinheritancebabeljs

Having trouble with table sorting in Jquery?

I am a beginner in the realm of Jquery and web programming. Recently, I attempted to implement the tablesorter jquery plugin for one of my projects but encountered issues with making it work properly. In search of a solution, I turned to Stack Overflow. C ...

javascriptjqueryhtmltablesorter

Add HTML content to an element within a directive and create a custom function to manipulate it locally

In my AngularJS application, I am faced with a variety of complex inputs scattered throughout. Some inputs utilize directives for autocompletion functionality, like those powered by Google Places or Twitter Bootstrap. I am currently exploring the concept ...

javascriptangularjsdirective

Obtain cell information when clicking on a specific field within a material-table

import MaterialTable from "material-table"; import ShipmentContext from "../context/ShipmentContext"; const ItemsTable: React.FC = () => { const shipmentcontext = useContext(ShipmentContext); const { filtered } = shipmentcontex ...

javascriptreactjsmaterial-uimaterial-table

Transfer the array using Ajax to a PHP script

I have an array generated using the .push function that contains a large amount of data. What is the most effective way to send this data to a PHP script? dataString = ??? ; // Is it an array? $.ajax({ type: "POST", url: "script.php" ...

phpjavascriptjqueryajax

How can I use AJAX to transmit a 2D array to a PHP page and then display each dimension individually?

Recently, I created a webpage with multiple checkboxes. Using jQuery, I am able to fetch data from these checkboxes and store them in a two-dimensional array. Here is an excerpt of my code: HTML snippet: <input type="checkbox" name="checkboxs[]" pric ...

javascriptphpjqueryarraysajax

Select only the top-level items in a dropdown menu using jQuery

Wondering how to create a fade effect that only triggers when hovering over the parent LI's without affecting the items in the dropdown menu? Any suggestions or solutions? Tried numerous examples with no success, struggling to make it work and gettin ...

javascriptjqueryhtml

Resolving the bothersome complications of self-looping steps in jQuery animate delay

My timeline definition includes selectors and a sequence of delays and animations to apply to an object. I have also provided the option to loop through the steps for a specific object. Here is the function that I use to queue the animations: function an ...

javascriptjqueryjquery-animate

The spawn function in the child_process module throws an error with the code -2, specifically the

Hey there, I'm working on creating an npx command that allows me to run child commands within my package.json bin: "bin": { "malzahar": "./src/bin/malzahar.js" }, Below is the code from my malzahar.js: #! /usr/bin/en ...

javascriptnode.js