Choosing the initial radio button in ng-repeat for validation purposes

Angular1

I have implemented the code snippet below to automatically select the first value in the result set if it is not already selected.

Take a look at "$index==0?true:false"

HTML

<li ng-repeat="address in addresses | filter:vm.addressSearch">
<div class="checkbox">
    <input type="radio" name="address-list" id="address-{{address.addressId}}"
        ng-click="vm.setAddress( address.addressId )"
        ng-checked="address.addressId === vm.cart.addressId || $index==0?true:false">
</div>

JS Validation

vm.setAddress = function( addressId ) {
        vm.cart.addressId = addressId;
        updateShippingValid();
};

function updateShippingValid() {
        vm.shippingValid = angular.isNumber( vm.cart.addressId ) && ( vm.cart.addressId !== 0 ) && angular.isString( vm.cart.shipMethod );
}

The first radio button for addresses will now be pre-selected upon loading, but my validation does not initially recognize it as selected, requiring an additional click. Is there a specific reason for this behavior?

Thank you

Answer №1

Initially, the value of your vm.cart.addressId is undefined!

It will only be assigned a value when you interact with a radio button due to your ng-click event.

To avoid any issues, make sure to initialize it in the controller like this:

vm.cart.addressId = addresses[0].addressId;

I hope this clears things up for you.

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

Bidirectional communication between two AngularJS scopes or controllers utilizing a service

I am facing numerous situations where I require clicks or other interactions to trigger actions in a different area of the webpage (one-way communication). Now, I have encountered a need for bidirectional communication, where changes made in element A can ...

Why can't I capture the text within this particular div using .text?

Trying to extract specific text from a website in Chrome's developer console. For example, here is the code snippet: <div class="someClass">This is some text!</div> Expected it to work with this command, but it returns 'undefined&a ...

What is the optimal method for storing a binary tree on a server?

I am looking to efficiently store a binary tree on my server for use in the IOS and Android applications of all my users. What is the most optimal method (in terms of speed) to accomplish this task? Edit: It is necessary for all my users to be able to up ...

Tips on positioning a button "above" the carousel-control-next icon

I have a carousel and I added a button to stop the spinning. However, when I try to click on the button, it seems like the "carousel-control-next" tag is being clicked instead. How can I solve this issue? ** Interestingly, when I remove the "carousel-cont ...

Print out the value of the element in the array using the console

Hey there! I have this array that I retrieved from MongoDB and I'm trying to figure out how to console log the value of item. Any tips or suggestions would be greatly appreciated! { "_id" : "61462a7bf3c0be993bcfdc3e", "item&qu ...

Is it possible to determine if jQuery find returns true or false?

Snippet of HTML Code <div class="container1"> <div class="box1">Box 1</div> <div class="box2">Box 2</div> <div class="box3">Box 3</div> </div> <div clas ...

Exploring the file attributes within nw.js

I'm in the process of developing a native application using nw.js. I have included the following code snippet: <input id="fileDialog" type="file" accept=".pdf,.epub" multiple/><a id="add" href="#">Add</a> Below is my JavaScript cod ...

What is the best way to rerun a script without having to manually refresh the entire webpage?

If you visit greenb.byethost12.com, you can check out the progress I've made so far. Currently, when you click on the correct answer, it triggers document.location.reload(index.php), causing the entire page to refresh. What I aim for is to have only ...

The data retrieved from MongoDB is not appearing on the webpage

Currently, I am working on a project for a chat app but I'm facing an issue with displaying the data stored in my local mongoDB database onto the webpage. The specific problem arises when attempting to showcase the sender's name, message content ...

One effective way to remove bold formatting from text that has been altered using execCommand

While I am utilizing document.execCommand to bold and underline text, what I really need is a button that can unbold the text and remove any underlining instead of just toggling them. Unfortunately, using execCommand("removeFormat") is causing some issue ...

having difficulty altering a string in EJS

After passing a JSON string to my EJS page, I noticed that it displays the string with inverted commas. To resolve this issue, I am looking for a way to eliminate the inverted comma's and convert the string to UPPERCASE. Does anyone know how to achiev ...

Verify if an object remains within the camera's field of view using three.js

When dealing with a 2D canvas, it's common practice to determine if an element is off-screen by checking its position coordinates like so: if( pos.x > window.innerWidth || pos.x < 0 || pos.y > window.innerHeight || pos.y < 0 ) { / ...

What is the best way to incorporate an "or" operation into the loop structure?

Is there a way to loop the code provided below while keeping the column names in the array and returning by loop? return Students.filter((singleItem) => { singleItem["id"].toLowerCase().includes(value.toLowerCase()) || singleItem[" ...

Refresh the Div Element As Required

Is it possible to achieve what I am attempting to do? Let me explain the scenario and my goal, so that if there is a better approach, you can guide me! Here is the scenario: I have a View and a PartialView. The PartialView contains a dropdown list that is ...

Is it Possible to Transform a THREE.CatmullRomCurve3 into a 3D Mesh?

In my latest project, I managed to create a stunning 3D line graph using THREE.js and the CatmullRomCurve3 class for smooth curves. Everything was going smoothly until I attempted to turn that curve into a mesh and possibly extrude it. My initial approach ...

Generate various routes and subroutes from an array

I need to create routes for an array of items, each with its own main page and nested pages. Here is an example structure: myapp.com/[item] (main item page) myapp.com/[item]/about (about item page) myapp.com/[item]/faq (faq item page) My goal is to itera ...

Animating Page Transitions using Angular 2.0 Router

Seeking to implement animated transitions for new components using the onActivate method in Angular 2. A Plunk has been set up to demonstrate the issue at hand: http://plnkr.co/FikHIEPONMYhr6COD9Ou Here is an example of the onActivate method within a pag ...

I am attempting to expand an array of objects divided into two distinct inputs within a React component

There is an array of objects named estimate, with keys 'cost' and 'service'. By clicking 'Add', a new index (i) can be added to the array. The problem arises on the first cycle where {'cost': 2500, 'service&apos ...

Transferring documents using JavaScript

I have been using the following method to upload files to my Laravel backend: setFile(id, e) { let self = this; let reader = new FileReader(); reader.readAsDataURL(e.target.files[0]); reader. ...

Selecting options with a click of a button in Template-Driven Forms

Whenever the page loads, I always notice that the last radio button is automatically checked. I believe it has something to do with the Id attribute, but I'm struggling to find a solution. countryArray countryA = [{name : "Finland"}, {name : "china" ...