Angular UI.Bootstrap radio buttons behave oddly when used in conjunction with ng-repeat

Having trouble dynamically generating options for a radio model using Angular's ui.bootstrap. I attempted to ng-repeat over an array to use its contents for the btn-radio attribute as shown below:

//In the controller
$scope.radioModel =  undefined;
$scope.radioModelButtons = ["a", "b", "c"];

//In the HTML
<div class="btn-group" >
  <button ng-repeat="value in radioModelButtons"
    class="btn" type="button" ng-model="radioModel"
    btn-radio="'{{value}}'">
      {{value}}
  </button>
</div>

Using angular 1.1.4 and ui.bootstrap 0.3.0.

Check out this jsfiddle to see the radio buttons acting independently without affecting the radioModel variable.

Appreciate any help, thank you!

Answer №1

Here is the correct way to structure your markup:

<button ng-repeat="item in items"
        class="btn" type="button" ng-model="radioButtonModel"
        btn-radio="item">
          {{item}}
</button>

Check out the live example on jsFiddle: http://jsfiddle.net/abc123/4/

Your approach had 2 key issues:

  • btn-radio should be used with an AngularJS expression, not an interpolated value
  • ng-repeat creates a new scope, so consider this when binding to a value from a parent scope

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

JavaScript: How to identify and select a specific item from a context menu

Currently diving into the world of JavaScript, so please keep that in mind when explaining. My main goal is to figure out a way to detect when a user triggers a right-click or uses the context menu from the keyboard. Specifically, I want to know if they s ...

Adding extra information to a property or array in Firebase

The following code snippet demonstrates how to create an array of event objects using observables. eventsRef: AngularFireList<any>; events: Observable<any>; this.eventsRef = db.list('events'); this.events = this.eventsRef.snapshotC ...

Upload multiple files at once, edit span text, and retitle to files chosen

I need help updating the span text for each file uploader on my page. I want the default "Choose a file..." text to change to the selected filename. Can someone assist me with this? Here is a Js fiddle that I've been working on. This is my HTML mark ...

Ways to retrieve the AppCtrl $scope from a view controller

Within my AppCtrl.js, I have the following: $scope.facebookUserDone = $q.defer(); I am looking to retrieve this variable from a different controller in a view: WeightLevel.js: $q.when($scope.facebookUserDone.promise).then(function () { $s ...

Are we looking at a declaration of an arrow function? Is this concept even real?

I have been exploring the concept of function expressions versus function declarations with arrow functions. From my understanding, this is an example of an arrow function expression: const fred = greeting = () => { console.log("Hello from arrow ...

The Vue.js application is experiencing issues with displaying Google Maps functionalities

I have developed an application using Vue.js in Monaca and Cordova with onsenUI. My goal is to display my location on a Google map within the page. I attempted to achieve this by utilizing the npm package named vue2-google-maps, but unfortunately, it' ...

utilizing axios encoding settings within vue.js

I am currently utilizing vue.js along with axios to retrieve data from an API endpoint. The specific URL I require is structured like this: https://base_url.com?f=json&where=&returnGeometry=false&spatialRel=esriSpatialRelIntersects&geometr ...

Node.js offers a simple and effective way to redirect users to another page after they have

I am experiencing an issue when trying to redirect the client to the confirm page after a successful login process. I keep encountering some errors. view screenshot router.post('/sign_in', urlend, function(req, res) { var email = req.body.user ...

Unset the class upon clicking outside the div, but maintain the class unset when the div is closed

I have a div that opens when the question mark icon in the upper right corner of the document is clicked. When clicked, a class is added which transforms the question mark into a close icon. When clicking outside the div, the div closes and the class is re ...

Generating a JavaScript object based on an array of keys

I'm currently grappling with a task that is proving to be quite challenging. I have a set of arrays structured like this: ['key1', 'key2', 'key3'] ['key1', 'key2', 'key4'] ['key1', ...

"Is there a way to extract a value from a JSON object using

I have an object with the following key-value pairs: { 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier': '918312asdasc812', 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name': 'Login1&a ...

Upgrading from version 3 to version 5 in d3 does not just update the visualization but also introduces a new one

I attempted to upgrade this d3 visualization from version 3 to version 5, but instead of updating within the existing visualization, it continues to add another visualization below. I included: d3.select(".node").selectAll("*").remove(); d3.select(". ...

Unlocking two features with just a single tap

I am currently working on a website for a kiosk, where the site transitions like a photoslide between each section. To achieve this effect, I have added a layover/mask on the initial page. The layover/mask is removed using a mouse click function. This is ...

Pointer Mouse Script

I'm in the process of figuring out the coding behind the mouse pointer effect used in the header of this particular wordpress template: Despite my efforts, I am having trouble pinpointing the specific script responsible for this effect. Could it poss ...

Unable to capture user input text using $watch in AngularJS when applied on ng-if condition

I have developed a cross-platform application using AngularJS, Monaca, and OnsenUI. In my login view, I check if the user has previously logged in by querying a SQLite database. Depending on whether there is data in the database, I either display a welcom ...

Fetching image URL via an AJAX request with CarrierWave

When using an API requested through ajax, the query returns a collection that is serialized into json before being sent back to the client. Each record in the collection has a photo URL assigned by Carrierwave. This seems like a standard process. However, ...

"Geolocation within the boundary of a map: what's the message

Can text be placed inside a shape using ng-map? <ng-map default-style="true" zoom="18" center="53.25564575, -113.81401062" map-type-id="SATELLITE"> <shape name="rectangle" editable="true" draggable="true" bounds="[[53.2559199723254, ...

Anticipated outcome for absent callbacks in module API implementation

I am seeking advice on the expected behavior when developing a Node module API. It is becoming complicated in my module implementation to check if the caller has provided a callback before calling it. I am starting to believe that it may be the user's ...

Is the Facebook AJAX Permissions Dialog displayed outside of a Pop-Up?

I have conducted extensive research but have failed to find a clear answer to my query. Although there is plentiful information on Facebook API AJAX/PHP communication, I am unable to locate an example where the Permission Dialog for an app (showPermissionD ...

Having trouble with AES decryption on my nodeJS/ExpressJS server backend

Looking to decipher data post retrieval from mongoDb. The retrieved data comprises encrypted and unencrypted sections. app.get("/receive", async (req, res) => { try { const data = await UploadData.find(); const decryptedData = data. ...