The issue of Angular UI Bootstrap buttons not updating persists even after the removal of an

My Radio-bottoms are powered by an Array for a Multi-Choice answer setup.

<div ng-repeat="option in options">
   <div>
      <button type="button" style="min-width: 100px" class="btn btn-default" ng-model="question.answer" btn-radio="'{{option.option_id}}'">{{option.option_text}}</button>
    </div>
</div>

Adding to the array works smoothly, as the preset answer is below the new element in Options.

However, deleting one of the Options above the answer and redefining the new Answer id does not update the Radio buttons correctly. The answer is updated on the screen, but the buttons remain unchanged.

UPDATE NEW PLUNKER! Check out my plunker here: http://plnkr.co/edit/2XWFwClewqtcXWPY8ZSK. If you select different options, the answer updates accordingly. But if you select the third option and remove the first or second option, you'll see that the answer updates without updating the check buttons correctly.

Any insights on this issue would be greatly appreciated. Thank you, Kim

Answer №1

Thanks to the generous assistance of the UI team, I discovered that the issue was a simple type casting error.

$scope.cp.options[i].option_id = i + 1;

The corrected code should be:

$scope.cp.options[i].option_id = "" + (i + 1);

I have made updates to the Plunker for anyone who may need to view the full sample. 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

Click on the nearest Details element to reveal its content

Is there a way to create a button that can open the nearest details element (located above the button) without relying on an ID? I've experimented with different versions of the code below and scoured through various discussions, but I haven't be ...

Styling multiple Higher Order Components (HoCs) using Material UI withStyles

When developing my application, I encountered an issue with using Higher Order Components (HoCs) and withStyles for styling. If I apply multiple HoCs to one component, the classes prop of the first HoC gets passed to the next one in the compose chain, caus ...

What could be the reason for the absence of 'server' and 'client'?

Trying to retrieve data from db.json but facing some challenges. Below is the content of my db.json file: { "posts": [ { "id": "react-hooks", "title": "React Hooks", "content": "The greatest thing since sliced bread!", "author": "ali" }, ...

The issue of AngularJS jQuery combination: scope model not being updated

Can anyone explain why the model is not updating immediately after the destroyElement() function ends in my simple model with jQuery effects attached to elements rendered inside ng-repeat? Check out the code on JSFiddle: http://jsfiddle.net/nEzpS/33/ HTM ...

Error encountered in Chrome while trying to fetch Next.js PWA with the use of next-pwa: Unhandled TypeError

Hello, I was recently working on a Next.js project and attempted to convert it into a PWA using next-pwa. To start off, I created the next.config.js file. const withPWA = require('next- pwa'); module.exports = withPWA({ pwa: { dest: ...

The canDeactivate function in the Angular 2 router can modify the router state even if I choose to cancel an action in the confirmation popup

In my Angular 2 project, I have implemented the canDeactivate method to prevent browser navigation. When a user tries to leave the page, a confirmation popup is displayed. However, if the user chooses to cancel, the router still changes its state even th ...

Using Javascript within HTML: A guide on when to utilize semi-colons and when to implement the return false statement

Exploring the use of JavaScript attributes within HTML elements: <input type="button" onclick="somceFunc()" /> <input type="button" onclick="somceFunc();" /> <input type="button" onclick="somceFunc(); return false;" /> Debating whether ...

Encountered a 400 error when attempting to send a request to a RestController in Spring MVC

I keep getting a "bad request 400" error when sending a request with parameters to the controller. I have double-checked the syntax but can't find any mistakes. Can someone please review my code and see what's wrong? var url = contextPath+"/bill ...

What is the most effective way to obtain a customer's latitude and location by prompting them to drop a pin on Google Maps?

My Android app has an API, but on my website I'm wondering how I can retrieve a person's location by having them place a marker on a Google Map. Is there a standard method for this? I need to obtain the latitude and longitude coordinates and send ...

The querySelector function seems to be identifying the element with the ID "submit" and another input element of type "submit"

My code includes a function that toggles between two elements' style.display values, switching them from "none" to "block" and vice versa. However, I've encountered an unexpected issue where the behavior of the "send" button seems to be linked wi ...

The swf file doesn't stretch to fit the window when the height is set to 100%

Struggling with creating a flash recorder controlled by JavaScript? Trying to get the flash to fill the browser window but disappearing when setting height or width to 100%? Where am I going wrong? <div id="flashrecorder"> <object wmode="trans ...

Is there a method to incorporate a scroll event into the ng-multi-selectdropdown, a npm package?

Query: I need to incorporate a scroll event in the given html code that triggers when the div is scrolled. However, I am facing issues with implementing a scroll event that works when the elements are being scrolled. <ng-mult ...

Exploring uncharted territory with the Navigator component in React Native

I am experiencing an issue with undefined navigator when using React Native MessageTabs: _onPressItem = (item) => { const { navigate } = this.props.navigation; //console.log(JSON.stringify(item)); navigate('SingleConversation', {id ...

Chrome extension causing delays in rendering HTML on webpage

Currently, I am developing a script (extension) that targets a specific HTML tag and performs certain actions on it. The challenge I am facing is that this particular HTML tag gets dynamically loaded onto the page at a certain point in time, and I need to ...

Encountering an issue with React Native where initializing a project with npx leads to a "

Running the command: npx react-native init MyApp An error occurred while downloading and copying the template. Error message: Cannot find module 'C:\Users\%%%%\AppData\Local\Temp\rncli-init-template-rVvcjE\node_ ...

`I'm experiencing difficulty sending JSON data to Typeahead using PHP`

I am having trouble passing an array of data from PHP to typeahead. I have tried various solutions but nothing seems to work. When I display the response on the console, it shows the array of strings but they are not populating in the typeahead field. PHP ...

Update data dynamically on a div element using AngularJS controller and ng-repeat

I am currently navigating my way through Angular JS and expanding my knowledge on it. I have a div set up to load data from a JSON file upon startup using a controller with the following code, but now I am looking to refresh it whenever the JSON object cha ...

Tips for embedding a script into an HTML document

I've been experimenting with tinymce npm and following their guide, but I've hit a roadblock. Including this line of code in the <head> of your HTML page is crucial: <script src="/path/to/tinymce.min.js"></script>. So, I place ...

The results returned by the jQuery find() function vary across various pages

One interesting feature on my website is the header bar with a search function. I have implemented a function that involves resizing boxes to contain search results. On one specific page, this function works like a charm: $(".suggestionCategory").each(fu ...

jQuery tabs become non-functional following submission of form

I have a form contained within a jQuery tab div that is loaded using AJAX: <div id="tabs-2"> <form id="frmLogin" name="frmLogin" class="cmxform" method="post" action="actions/login.php"> <p> <label>Username& ...