Angular's radio button is set to "checked" on a pre-configured model

Looking for help with customizing alignment of images in a bootstrap/angular template? Check out the code snippet below:

<div ng-repeat="a in attributes">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-white" ng-click="align(a, 0)">
            <input type="radio" name="{{a.id}}" ng-checked="{checked : (a.numericValue === 0)}">
            Left
        </label>
        <label class="btn btn-white" ng-click="align(a, 1)">
            <input type="radio" name="{{a.id}}" ng-checked="{checked : (a.numericValue === 1)}">
            Center
        </label>
        <label class="btn btn-white" ng-click="align(a, 2)">
            <input type="radio" name="{{a.id}}" ng-checked="{checked : (a.numericValue === 2)}">
            Right
        </label>
    </div>
    <div class="clip text-{{align(a)}}">
        <img alt="#" ng-src="a.image">
    </div>
</div>

The model is updated when you click on the button which then returns the correct css class. However, setting the initial checked status on the button seems to be an issue.

I've tried using expressions but without success:

{{(a.numericValue == 0) && 'checked' || ''}}

or simply:

checked="{{(a.numericValue == 0) && 'checked' || ''}}"

If anyone has suggestions on how to set the initial value, I'd greatly appreciate it!

Many thanks, Davide.

Answer №1

It seems like there might be an issue with the way you are implementing angularJS + radio buttons. I recommend referring to angularjs documentation for guidance.

Your radio button setup should resemble something like this:

<input type="radio" ng-model="a.numericValue" value="0"> Left
....
<input type="radio" ng-model="a.numericValue" value="1"> Center
....
<input type="radio" ng-model="a.numericValue" value="2"> Right

To initialize the checked status, make sure to set the initial value for a.numericValue in the controller:

a.numericValue = 0;

AngularJS will then compare a.numericValue with the value attribute of the radio button to determine which one should be checked.

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

Utilizing a PHP-scripted multidimensional array in an AJAX success function

I've encountered an issue while trying to access a multidimensional array passed to my AJAX success function. Here's how I'm sending the data: $response = array(); $response['message']['name'] = $name; $response['m ...

Obtain the ID of the textarea element when it is clicked

Is there a way to retrieve the id of a textarea that was focused when another element is clicked? I have tried using $(':input:focus').attr('id'), but the textarea quickly loses focus after the click, making it impossible to obtain the ...

Tips for achieving seamless scrolling with the combination of javascript and css

Looking for a solution to achieve smooth scrolling on an HTML page without using the #id_name to scroll to a specific div. Instead, I want to scroll to a particular point, such as having a button that scrolls down the webpage smoothly by 250px when press ...

Verify whether the element retains the mouseenter event after a specified delay

I recently implemented some blocks with a mouseenter and mouseleave event. <button onMouseEnter={this.MouseEnter}>hover</button> MouseEnter(e) { setTimeout(() => { // Checking if the mouse is still on this element // Pe ...

Guide on inserting text within a Toggle Switch Component using React

Is there a way to insert text inside a Switch component in ReactJS? Specifically, I'm looking to add the text EN and PT within the Switch Component. I opted not to use any libraries for this. Instead, I crafted the component solely using CSS to achie ...

Extracting values from PHP using AJAX

Whenever a user clicks on the download button, a zip file is successfully created on the server with the necessary files. However, instead of getting an alert with the location of the zip variable ($zip) from PHP as expected, it shows [object Object]. The ...

Should you approach TypeScript modules or classes with a focus on unit testing?

When it comes to unit testing in TypeScript, which content architecture strategy is more effective: Creating modules or classes? Module Example: moduleX.method1(); // Exported method Class Example: var x = moduleX.method1(); // Public method ...

Removing White Spaces in a String Using JavaScript Manually

I have created my own algorithm to achieve the same outcome as this function: var string= string.split(' ').join(''); For example, if I input the String: Hello how are you, it should become Hellohowareyou My approach avoids using ...

The JQuery functionality is failing to execute properly on Internet Explorer

I have developed a JQuery script that appears to be working perfectly in all browsers, except for IE 8. Interestingly, when I checked Internet Explorer's error details, it did not provide any specific information about the issue. Instead, IE simply po ...

The Express application appears to be unresponsive, but the data has been successfully saved to the MongoDB database. An error with the

Currently, I am delving deeper into the MERN stack and working on a straightforward CRUD application utilizing it. One of the recent additions to the app includes validators implemented through express-validator for handling requests. However, an issue ari ...

"Upon submission, 404 error message is displayed indicating resource not

Recently, I delved into using MEAN Stack to develop a simple application as a beginner. After setting up my controllers, I encountered an issue when trying to post - it kept returning 'api/user not found'. Can someone help me identify the problem ...

Unable to access property 'map' of undefined - error occurred while processing JSON data in line test.js:11

I'm attempting to utilize the json file in the test component below, but I keep encountering the error: TypeError: Cannot read property 'map' of undefined. I have modified the file within the test.js component, and when testing it with a sa ...

What is the best way to retrieve the value of a text box in VUEjs using its unique identifier?

In my form, there are a total of two text boxes with predefined values. However, I am looking for a way to retrieve the value of one specific textbox based on the entered ID number. For example, if I input "1," I expect to see the value of text box 1 only ...

Storing data seamlessly within a controller using AngularJS on the same page

Can someone please assist me with saving data into an array and displaying it in a table within a form? <div ng-app="farmerapp" ng-controller="RegController"> @Html.TextBoxFor(x => x._Cetificate.CertificateName,new { data_ng_model = "_Ce ...

Exploring AngularJS tab navigation and injecting modules into the system

Two separate modules are defined in first.js and second.js respectively: first.js var app = angular.module('first',['ngGrid']); app.controller('firstTest',function($scope)) { ... }); second.js var app = angular.mo ...

Is it necessary to create event objects before setting event handlers in Leaflet JS?

I'm currently working on creating event handlers that respond to the success of the location() method in the leaflet JavaScript map class Here is my current implementation: function initializeMap() { var map = L.map('map').locate({setV ...

Amcharts displays individual balloons for each graph instead of a single balloon for all graphs

My goal is to have a single balloon for all stacked graphs. I modified my code according to this guide. Unfortunately, the data for messages is not being displayed. https://i.sstatic.net/2MRhc.jpg Did I make an error in my implementation? function creat ...

Troubleshooting 'Warning: Prop `id` did not match` in react-select

Having an issue with a web app built using ReactJs and NextJs. I implemented the react-select component in a functional component, but now I'm getting this warning in the console: Warning: Prop id did not match. Server: "react-select-7 ...

Is there a way to randomly change the colors of divs for a variable amount of time?

I have a unique idea for creating a dynamic four-square box that changes colors at random every time a button is clicked. The twist is, I want the colors to cycle randomly for up to 5 seconds before 3 out of 4 squares turn black and one square stops on a r ...

Angular fresh, soiled, or handled

Is there a way to determine if a model has been modified without relying on a form submission? I have tried using model.$pristine, but it does not seem to provide any useful information. Are there any other methods or approaches that can be used? ...