Using the UI Bootstrap radio button within an ng-repeat loop

I'm attempting to create a series of radio buttons using ui bootstrap (http://angular-ui.github.io/bootstrap/) similar to the example on their website, but utilizing ng-repeat:

<div class="btn-group">
    <label ng-repeat='option in options' class="btn btn-danger" ng-model="radioModel2" btn-radio="'{{option}}'" uncheckable>{{option}}</label>
</div>

However, for some reason it's not working when I use ng-repeat. Does anyone know why?

I've created a plunker to demonstrate the issue: http://plnkr.co/edit/0sDgKoRhHOgfnIvBPmi4?p=preview

Appreciate any insights!

javascriptangularjsangular-ui-bootstrap

Answer №1

There is a small error in your ng-model usage when working with radiobuttons and ng-repeat.

<div class="btn-group">
    <label ng-repeat='option in options' class="btn btn-danger" ng-model="$parent.radioModel2" btn-radio="'{{option}}'" uncheckable>{{option}}</label>
</div>

Give this code snippet a try.

For more details, visit the following link on plnkr:

http://plnkr.co/edit/m24ZcYuttw6IuCBh02rQ?p=preview

Answer №2

According to the information provided on the Angular.js Scopes wiki:

When using ng-repeat, a new scope is created for each item/iteration. This new scope inherits from the parent scope, but it also assigns the item's value to a new property on that child scope.

If the item is a primitive data type (boolean, string, integer, etc.), it creates a copy of the value in the new child scope property. Changes made to the child scope property do not affect the array referenced by the parent scope.

My thoughts are highlighted in italic.

However, if an object is provided instead, only a reference to the original object is assigned to the child scope, not a duplicate.

To make your example function correctly, replace ng-model="radioModel2" with 

ng-model="data.radioModel2"
and ensure you create the object in your controller using $scope.data = {};

You can view a working version of your code 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

Is it better to store data individually in localStorage or combine it into one big string?

When it comes to keeping track of multiple tallies in localStorage, one question arises: Is it more efficient to store and retrieve several small data points individually or as one larger chunk? For example: localStorage.setItem('id1', tally1); ...

javascriptcordovatypescriptlocal-storageionic2

Currency format Material Design Input

Are there any input options within Material Design that support specific formats like currency? If this feature is not available, what alternatives would you recommend to achieve the desired functionality? Appreciate your help. ...

angularjsmaterial-design

Interacting with distant servers within XD plugins

Currently in the process of developing an XD plugin, with a goal of fetching images from a remote server. Is this achievable and are there specific APIs that can facilitate this task? ...

javascriptremote-serveradobe-xd

Manipulating values in JavaScript using an onclick event in PHP

I am looking to remove the "http" from the URL part of an input link before sending the data. This is my input code that looks like this when clicked: <input style="outline: none;" type="button" onclick="formatText ('link:url');" class="btn ...

javascriptphphtml

How to Refine Database Queries in Laravel Without Using Conditional Statements

I am currently facing the challenge of filtering users in my database using numerous if / elseif statements, and I'm on the lookout for a more efficient method. At present, I find myself writing if statements for every possible query based on the foll ...

javascriptphpajaxlaravel

What is the best way to remove $parent in Angular?

Check out this Plunker In one of my controllers, I have incorporated an external template using ng-include. This template is displayed and hidden based on a click event of a button. The functionality works as intended, however, I am currently using $paren ...

angularjsangularjs-directiveangularjs-scopeangular-ui

Error: An unrecognized symbol '<' was encountered while utilizing $routeparams

In my Angular application with MongoDB, Express, and Node.js, I have a list of flats and I want to add an "Edit" option for each flat. Below is a snippet from my api.js file: api.route('/flats/:id') .get(function(req, res){ Flat.findById(r ...

javascriptangularjsnode.jsmongodbexpress

Executing a TypeORM query with a distinct clause that ignores case sensitivity

I am attempting to construct a TypeORM query builder that pulls data from a postgresql database to retrieve all unique names. Here is how my query currently looks: names = await this._context.manager .getRepository(Names) .createQueryBuilde ...

javascriptnode.jspostgresqltypeorm

After two HTML injections, Javascript ceases to function properly

I am in the process of developing a chat feature for my website. The layout includes a conversation section on the left and a list of users on the right. When a user's div is clicked, their ID is transmitted to the Django back end. Subsequently, full ...

javascriptjqueryajaxdjango

Display information from a selected card on a separate page upon clicking

I am currently working with a JSON file to display cards on a webpage. The code is sourced from a file named paintings.js and the cards are rendering correctly. However, when I click on a card, it redirects me to a blank paintingInfo.js page. I'm wond ...

javascriptreactjsreact-routerlocal-storagereact-router-dom

Updating an array using `setState` does not result in the array being updated

I created a component that uses the .map() method to render an array of students and has a button to shuffle and update the display. However, I'm facing an issue where the display does not update every time I click the button. const Home: NextPage = ...

javascriptreactjstypescript

Implementing AJAX notifications in a contact form integrated with PHP, Google reCAPTCHA, and SweetAlert

I've implemented an AJAX script to handle the submission of a basic contact form with Google reCAPTCHA at the end of my HTML. Here's the relevant HTML code: <div class="col-md-6"> <form role="form" id="form" action="form.php" method ...

javascriptphpjqueryhtmlforms

Issue: A request is not pending for flushing during the testing of an AngularJs service

As a beginner in AngularJs, I am currently working on my first unit test. In order to test the service I created, I wrote a test that simply returns a single Json object. However, whenever I run the test, I encounter the error mentioned in the title. I am ...

javascriptangularjskarma-runnerangular-mock

The next column featuring a dropdown menu

My goal is to make this sketch operational. The red elements in the sketch need to be programmed. Currently, I am using angularJS and bootstrap with the following code: <div class="col-md-6"> <div class="form-group"> <label&g ...

javascripthtmlcssangularjsbootstrap-modal

Using HTML and CSS to generate an alpha mask on top of an image

I am currently working on a website and I am looking to create an effect where an image is masked by an overlay. The goal is to achieve a "fade out" effect, without any actual animation, but rather make it appear as if the image is gradually fading into th ...

javascripthtmlcssfademasking

Error Message: Error Code 2. I am encountering an issue with the bot expecting either undefined or null and receiving a string primitive instead. Any

As I delved into creating a music bot with support for slash commands, everything seemed to be going smoothly when embedding a URL to a single song. However, the trouble began when attempting to include a link to a playlist, resulting in two perplexing err ...

javascriptnode.jsdiscorddiscord.js

Nested tables in Datatables retrieving child table rows based on parent table

I have been struggling for the past three days to get my nested Datatables working properly. I have a parent table called MAINtable and a child table called adjlinesTable. The issue I am facing is that all lines from the adjlinesTable are being drawn to ...

javascriptjqueryajaxdatatables

Angular's DI (dependency injection) fosters seamless communication between various modules, allowing services and directives from different modules to interact

When needing to use a factory from another module, is it necessary to first add the dependency injection of the module to the current one and then afterward add the DI of the factory to the current factory? Or can the factory be added on its own without in ...

angularjs

"Exploring the possibilities of combining AngularJS with PHP to manipulate

Recently, I started diving into AngularJS and encountered a situation where I needed to fetch data from a database as an array using a foreach function. Here is a snippet of the code I used: <ul> <?php foreach($Items as $Item):?> ...

phpjavascriptangularjsangularjs-ng-repeat

"Incorporating Adobe Edge Animate alongside AngularJS and AngularUI Router for dynamic web design

Currently, I'm in the process of integrating multiple animations created using Adobe Edge Animate into a single AngularJS application for a project. These animations will serve as the visual elements for a game, with player input controlling the compo ...

javascriptangularjsangular-ui-routeradobe-edge