AngularJS allows developers to easily create radio boxes with pre-selected items

Can anyone help me figure out how to set the selected item as checked when using a radio button list?

Here is an example of my code:

<div ng-repeat="vehicle in filteredVehicle">
<input type="radio" name="radiog_lite" id="radio_{{$index}}" class="css-checkbox" ng-value="vehicle" ng-model="$parent.selectedVehicle" ng-disabled="vehicle.enable == '0'" />
<label for="radio_{{$index}}" class="css-label radGroup1" ng-if="vehicle.enable == '1'"></label>
<h5>{{vehicle.vehicleTypeName}}</h5>

I have created a Plunker with this code, and I need assistance in fixing the selected item. The selected vehicle can be found on $scope.selectedVehicle.

Plunkr

Thank you

javascriptangularjsradio-button

Answer №1

It's recommended to connect the selectedVehicle with an object within the array. This is necessary as Angular automatically adds a unique identifier $$hashKey to every object.

Follow this code snippet:

$scope.selectedVehicle = {};
$scope.filteredVehicle = {};

$http.get('data.json').then(function(data){
    angular.forEach(data.data.vehicleType, function(value, key) {
          if(value.vehicleTypeID ==  data.data.selected.vehicleTypeID){
            $scope.selectedVehicle = value;
          }
    });
    $scope.filteredVehicle = data.data.vehicleType;
});

Check out the demo here

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

Enhance the "text" attribute of IXMLDOMElement to enable functionality in Chrome

The web application I am currently working on was developed approximately 10 years ago and is only compatible with Internet Explorer. My goal is to make it functional in Chrome as well. I am facing a challenge regarding the "text" property of IXMLDOMEleme ...

javascripthtmlcross-browser

What could be the reason why all items are not being deleted when using splice inside angular.forEach

Upon clicking the "Delete All Expired" button in the code below, I observe that it only removes 3 out of 4 customer objects with status=expired. What could be causing this behavior? <html ng-app="mainModule"> <head> <script sr ...

angularjs

Breaking down a URL based on one of two distinct components

Currently, I have a piece of code that splits the URL and removes everything after &7. Is there a way to modify it so that it also checks for |relevance simultaneously and splits based on whichever one is found? $(document).ready(($) => { const pa ...

javascriptjquery

Is it appropriate to include this jquery code within an angular controller?

When creating a list of rows in an HTML table using ng-repeat, I encountered an issue with styling radio buttons using jQuery. The code snippet below shows the jQuery script used to apply the style: <script> $(document).ready(function () { $('. ...

jqueryangularjscontrollerradio-button

Step-by-step guide on utilizing the GitHub API to automatically generate a pull request with modified files

What is the process for creating a PR on Github using their API? For example, if I have a package.json file as a string and I want to modify it, I would need to parse it, make the changes, and then how do I ensure these changes are reflected locally afte ...

javascriptnode.jsgithubgithub-api

tag-swapping function

I have a specific HTML code paragraph that I am working with: <p id=tag1> html statements before click </p> My goal is to create a function that will split the paragraph into two separate paragraphs like so : <p id=tag1> html statement ...

javascriptjqueryhtml

Chrome full screen mode can be toggled on websites after ajax data has loaded

I am currently experiencing a frustrating issue with Chrome on my webpage. The pagination feature loads content via an ajax call at: Whenever I click on the 2nd, 3rd, or subsequent tab in the pagination, the load process occurs but then suddenly jumps int ...

javascriptajaxgoogle-chromedebugging

Utilizing a separator to individually display each item within a string

How can I print out each element of a string separately without including the last element? var animals = "bear, lion, tiger, jaguar"; $.each(animals.split(",").slice(0,-1), function(index, item) { console.log(item); }); p.s. I want to a ...

javascriptjquery

Customize JQGrid formatter for actions - easily edit, save, or cancel without using the default 'action' formatter

Working on an asp.net project, I am developing a page where users interact with a jqgrid version 4.4.4. Due to the limitations of this version, I am unable to use formatter: 'action'. Instead, I have implemented a custom formatter that displays a ...

javascriptjqueryasp.netjqgridvisual-web-developer-2010

Is it advisable to place custom middleware at the end of the chain in a customized next.js server setup?

I am facing a challenge in integrating a custom middleware into a bespoke next.js server. The issue lies in the fact that there are no set path patterns to which I can bind my middleware, as our CMS generates URLs of varied forms and structures. Therefore, ...

javascriptnode.jsexpressnext.jsserver-side-rendering

Include a quantity dropdown menu on the cart page of your Shopify store's debut theme

Hey there! I'm currently customizing the Shopify Debut theme and I'm trying to incorporate a quantity selector as a dropdown on the cart page. Unfortunately, I'm encountering some issues with this implementation. I've managed to succes ...

javascriptjqueryajaxshopify

Exploring nested objects in Javascript through iterating and extracting all properties in a continuous loop (Updated)

In my code, I created an object with two sub-objects structured like this: var testObject = { "page":{ "type": "ePurchase", "title":"Purchase confirmation" }, "user": { "name": ...

javascript

Tips for continuing a count from where it left off

I have encountered an issue with the input fields in my form. I used the counter method to add input fields and saved the form. However, when I try to add more fields, the counter starts from 0 again. For example, I initially added 5 input fields with mod ...

javascriptjqueryangularjs

What could be causing the reliability issue with this particular Angular JS code for dropdown menus?

Attempting to create a dynamic country-city dropdown menu using AngularJS <div> Country: </br> <select data-ng-model="country" ng-options="country.name for country in countries" data-ng-change="updateCountry(country) ...

javascripthtmlangularjsjson

Retrieving data from Firebase query and displaying as an array of results

Currently utilizing the @react-native-firebase wrapper for interaction with Firebase's Firestore. Within my function, some querying to a specific collection is performed, with the expected result being an Array object containing each located document. ...

javascriptreactjsfirebasereact-nativegoogle-cloud-firestore

Guide on how to forward the response obtained from an Ajax call to a different HTML page

I am working with a mongoose database that stores data containing an individual's first and last name. The user inputs their first name into a field, triggering an ajax request sent to the file named controller.js. This file generates a JSON response ...

javascripthtmljsonnode.jsmongoose

Sorting JavaScript Objects By Date

My goal is to arrange my array of objects with date values in descending and ascending order. Here is the code I am using: function comp(a, b) { return new Date(a.jsDate) - new Date(b.jsDate); } function compNewestFirst(a, b) { return new Date(b.jsD ...

javascriptarrayssortingdateobject

Activate background functionality while modal is active in Bootstrap 4

I have come across similar questions addressing the need to change the following: .modal-backdrop { display: none; } However, my modal does not have this .modal-backdrop. I am unsure if this is a new feature in Bootstrap 4, but the mentioned solution ...

javascriptcssbootstrap-4

sophisticated HTML navigation bar

I am looking for a way to create a menu where the drop-down items overlay the rest of the menu when the screen width is small. Here is my current code: nav{ line-height:100%; opacity:.9; }nav ul{ background: #999; padding: 0px; border-radius: 20px; ...

javascripthtmlcssnav

The JavascriptExecutor is unable to access the 'removeAttribute' property of a null object

While utilizing Javascript executor to remove the readonly attribute, I encountered an error message: Cannot read property 'removeAttribute' of null. I came across various discussions where users suggested that removing AdBlock from Chrome solve ...

javascripthtmldomselenium-webdriver