AngularJS radio button default selection

I've come across similar questions multiple times, and while I've explored various solutions, none seem to work in my case...

html file:

<input id="sampleA" name="try" type="radio" data-ng-model="$ctrl.isSampleA" value="true" data-ng-change="$ctrl.update()"></input>
<label for="sampleA">Sample A</label>
<input id="sampleB" name="try" type="radio" data-ng-model="$ctrl.isSampleA" value="false" data-ng-change="$ctrl.update()"></input>
<label for="sampleB">Sample B</label>

js file:

//Initialization:
vm.isSampleA = false;
//This function returns the correct boolean value returned by API
    vm.update = function() {
    vm.isSampleA = response.rows["0"].sampleA;
};

To briefly explain the situation: Initially, 'Sample B' is checked by default. The user then selects 'Sample A' and sends the updated value to the REST API, where it updates correctly. However, when attempting to edit the form again:

Expected: 'Sample A' should be checked

Actual: Neither of the 2 options are checked, even though the value of 'isSampleA' is true.

Answer №1

Instead of using the plain value attribute, consider utilizing the ng-value directive:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script>
  angular.module('app', [])
</script>

<div ng-app='app' ng-init='test=true'>
  <label>
    <input type="radio" ng-model="test" ng-value="true">
    One
  </label>
  <br/>
  <label>
    <input type="radio" ng-model="test" ng-value="false">
    Two
  </label>
  <br/>
  <button ng-click='test = !test'>Click</button>
</div>

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

Ways to update the color of the mat-dialog-title using the material theme

Currently, I am utilizing the Angular Material Dialog and have been attempting to dynamically change the title color of the dialog based on the material theme. <h1 mat-dialog-title color="primary">{{ title }}</h1> Even though setting ...

Disabling weekends in Angular Material datetimepicker: A simple guide

I came across angular material datetimepicker on this link My goal is to prevent users from selecting weekends and Wednesdays in the angular material datetimepicker <input time="false" date="true" mdc-datetime-picker type="text" id="date" placeholder= ...

What is the best approach for sending extremely lengthy data through an AJAX URL?

Currently, I am utilizing PHP and AJAX simultaneously to obtain user data and insert it into the database. The issue arises when trying to send a large string of 10000 characters, as the browser displays an error stating that the URL is too long. While I ...

"Empower your app with the dynamic combination of Meteor Publish and

Consider the scenario below: In my client application, I have created a complex filter stored in a custom reactive object named currentFilter. The method currentFilter.buildQuery() is used to generate the query object for MongoDB database. Due to the la ...

What techniques can I employ to ensure that withLatestFrom() effectively interacts with itself?

In my program, I have an intermediate stream that is connected to a source, but it can also trigger events from other sources (such as user input). In another part of my code, there is a derived stream that needs to compare new data from the intermediate w ...

The React implementation of an OpenLayers map is not responsive on mobile devices

I recently set up an OpenLayers map in a React project and it's working smoothly on desktop browsers. The map is interactive, allowing users to drag, zoom in/out, and display markers as expected. However, I'm facing an issue with touch events on ...

Alert: Unauthorized hook call and Exception: Cannot access properties of null (reading 'useState')

I am currently working on a project using ASP.NET Core with React. To bundle my code, I have opted to use Webpack 5. Within the index.jsx file, I have the following code: import { useState } from "react"; function App() { const [value, setV ...

My toggleclass function seems to be malfunctioning

I am encountering a strange issue with my jQuery script. It seems to work initially when I toggle between classes, but then requires an extra click every time I want to repeat the process. The classes switch as expected at first, but subsequent toggles req ...

Passing a number variable from a function to setInterval using JavaScript

const exerciseItems = [ ["crunches", 30], ["crunches", 45], ["squats", 30], ["squats", 45], ["lunges", 30], ["lunges", 45], ["wall sits", 30], ["wall sits", 45], ["push ups", 30], ["push ups", 45], ["leg ups", 30], ["leg ups ...

I'm having trouble getting the second controller to function properly in my AngularJS application

I've been looking everywhere for a solution on how to implement two controllers, but I can't seem to get it working. Could there be something wrong with my HTML or could the issue lie in my script? Here is the JavaScript code: <script> v ...

The struggle between Node.js 404 errors and Angular's URL refresh issue

I am currently developing a Node.js and AngularJS application. I encountered an issue where a page loads successfully when the URL is entered, but then I added a script to redirect to a 404 error page. Now, only one of the criteria works at a time - either ...

How is it that cross-domain scripting is able to occur with local files on a smartphone or tablet?

My Experiment: To test cross-site scripting (XSS), I set up an index.html file with a xss.js script that utilized the jQuery.get() function. After opening the index.html in various browsers (Firefox, Chrome, IE, and Opera), I attempted to trigger an ajax ...

Tips on decorating multi-chain selection buttons

Our latest project involved implementing multi-select buttons. Due to the complexities of styling select and option tags, we decided to utilize chosen.js for this purpose. <link rel="stylesheet" href="$url_link/css/user_css/chosen.css"> <script t ...

Using AngularJS for conditional statements in JavaScript

I'm facing an issue with a function in a controller that uses an if-else statement to change the return value. Everything works fine initially, but when I change the dropdown selection, the function stops working altogether. I'm not sure if I&apo ...

toggle the outer div along with its corresponding inner div simultaneously

On one of my pages (let's call it "page1"), I have multiple divs, some nested within others. These divs are initially hidden and toggle on when a specific link is clicked (and off when clicked again). To view a nested div, the outer div must be opened ...

Is there a way for me to identify what deletes CSS classes from an element during the first page load?

On a page where an element (specifically, a TextBox) initially has two CSS classes assigned when it loads, something strange is happening. After the page renders and JavaScript runs, the class attribute of the input element mysteriously becomes empty. I c ...

AngularJS's manual bootstrapping fails to update property values when an input changes via a method call

I'm facing an issue with my AngularJS application where the result is not getting updated when the input changes in the HTML field. Strangely, when I enable auto bootstrapping, it works as expected. I'm not sure what I'm doing wrong. Below ...

Struggling to include the Active class to group list item when using the react map function

Can someone assist me with this issue? Whenever I hover over a group list item generated by a react map() function, it applies the active class to all items instead of just the one I select. Here is the code snippet: const LeftPanel = (props) => { le ...

Using Node.js to generate PDF documents and send them directly to the response stream

I am currently utilizing PDFKit, a PDF generation library for Node.js, which can be found at pdfkit.org. My goal is to send a PDF as a response to a client. # Save the PDF file to the disk doc.write('output.pdf'); The code provided above saves ...

How can I use jQuery to add styling to my menu options?

Looking to customize my menu items: <ul> <li class="static"> <a class="static menu-item" href="/mySites/AboutUs">About Us</a> </li> <li class="static"> <a class="static-menu-item" href="/m ...