"Utilizing AngulaJS to apply a class to the parent element when a radio button is

I'm wondering how I can assign a class to the parent div of each radio button in a group?

You can find the code below and view the corresponding JSFiddle here.

Here is the HTML:

    <div class="bd"> <input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'></div>
        <div class="bd active"><input type="radio" ng-model="value" value="bar" ng-change='newValue(value)'></div>
            <div class="bd"><input type="radio" ng-model="value" value="baz" ng-change='newValue(value)'>    </div>
<hr> 

</div>

And here is the JS:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.value= 'foo';

    $scope.newValue = function(value) {
       console.log(value);
    }
}

Finally, the CSS:

.bd {
    border:1px solid red;
    width:100px;
    float:left;
}
.active{
    border:1px solid green;
}

Answer №1

If you want to achieve this, utilize the ng-class directive:

<div  ng-class="{'active': value=='foo'}" ...>

Take a look at the updated fiddle here: http://jsfiddle.net/6urevw2t/2/

I hope this information proves to be useful for you.

All the best,

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

Filtering dates in ag-grid with custom format

Is there a format filter available in ag-grid similar to this setup? field : 'replacementPieceDesignation.replacementPiece.maxDate', headerName : "Date (max)", cellFilter: 'date:\'MM/dd/yyyy\'',` Appreciate your h ...

What is the best way to hide the next/previous tabs once the jQuery dataTable has been set up using jSON data

Setting up a jQuery table using JSON data. Despite knowing that there will only be one row, the next/previous tabs are still displayed after the table. Is there a way to remove them? Here is the code for the table: table = $("#retrievedTable").dataTabl ...

Utilizing CSS to incorporate a background image into HTML code

Is it feasible to utilize pure HTML for the background-image property? Consider the following scenario: The original: background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height=&apo ...

Stop iframes on iOS from automatically adjusting their height based on the content within them

Update: I recently discovered that Apple quietly prohibits fixed-size iframes in iOS. How frustrating! What can be done to make an IFrame responsive in iOS Safari? I am facing a seemingly straightforward task: embedding a fixed-size <iframe> within ...

When using AngularJS's ui-router, the onEnter function is triggered before the view has

I have nested views in my code. Here is the structure: <section ui-view id="one"></section> Next, I have a second nested view: <!--- Removed for brevity ---> <section ui-view="two" id="two"></section> And lastly, there is ...

Attempting to increase the size of the menu text upon hover action

It seems like a basic mistake on my part, but I just can't seem to make it work. What I'm trying to achieve is that when you hover over a specific item in the menu, the text within that item should increase in size. However, currently it only en ...

Tips for displaying dependent dropdown options in AngularJS

I need assistance with creating a form that includes two select boxes. Depending on the option selected in one select box, specific options should be shown or hidden in the other select box. For example: Select box A Options: Apple Banana Select Box B O ...

Enforce the splicing of the ng-repeat array with the utilization of track by

Our app incorporates a task list that can potentially grow to a substantial size. The main task list is accompanied by a sidebar, where selected tasks can be edited using a different controller (TasksSidebarCtrl instead of TasksCtrl which handles the list ...

Unable to send a PHP array to jQuery

Struggling to transfer PHP-encoded array to JavaScript. homepage.php echo '<script src="script.js"></script>'; $a=array(1,2,3,4,5); echo json_encode($a); ?> script.js: $.ajax({ method: 'GET', url: 'index ...

Showing headings in the table vertically

I have a header1 and header2 with corresponding data1 and data2 that I want to display differently. h h e e a a d d e e r r 1 2 data1 data2 To enhance the presentation, I wish to add borders around the head ...

Using the directive in AngularJS and passing ng-model as an argument

Currently, I am creating a custom directive using AngularJs, and my goal is to pass the ng-model as an argument. <div class="col-md-7"><time-picker></time-picker></div> The directive code looks like this: app.directive(' ...

I am experiencing issues with the functionality of the jQuery function

I am currently diving into the world of jquery. I put together a script, but unfortunately it's not functioning as expected. 1 Here is a snippet of my HTML code <ul id="recur" class="elasticstack"> <li id=<?=$item['id']?> ...

Is there a way to continuously click on a button 99 times or until the code finishes running?

Need Assistance, Please Assist. I am encountering an issue where I have the same type of skip button with identical name and id properties for all products, but only the xpath changes. Can you provide guidance on how to efficiently click on 99 similar ski ...

The button labeled "modify layout" remains unresponsive when activated

Allow me to start by saying that I am not a coding expert. Currently, I am enrolled in a computer science class and have a basic understanding of HTML, CSS, and some Javascript. However, I have encountered a problem that I cannot solve. When I click on th ...

Storing data using Ionic Local Storage - easily save your $http database directly onto your

I have encountered a problem with the local storage in my Ionic app. The concept is simple - I want to save all the data from an SQL database to the device and then display it when there is no internet connection. Here is the code snippet where I fetch th ...

Is it possible for Angular.js to access a server session attribute?

I am in the process of creating an authentication system with angular.js My goal is to implement a session timeout after a period of inactivity and expire the current session if a user logs in from another device. In both scenarios - 1) idle timeout and ...

What is the process of connecting marionette rendered views to the DOM?

I am encountering a challenge with my simple setup using Marionette that I am trying to resolve. My issue lies within a view containing a collection: var MyItemsView = Marionette.View.extend({ template: "#some-template" }); var view = new MyItemsVie ...

React does not allow for images to be used as background elements

I am currently working on a web page and I have attempted to use both jpg and png images as backgrounds, but they do not seem to display on the page. import './Entrada.css' const Entrada = () => { return( <div style={{ b ...

The additional cost associated with using a React hook is called the "

Our system includes a theme context provider that passes down a theme to all child components, calculated based on the device's dimensions. We can easily access these values using the useTheme hook in any component. In addition, we have a constants f ...

Increase the date and time by a specified number of days

After searching for solutions on how to add a specific number of days to a given date, I came across various methods. However, my requirement is to add days to both Date and Time in the format MM-DD-YYYY HH:MM:SS. I attempted a method which worked fine wh ...