CODEWITHSUNDEEP
htmlcssangularjs
amenoire
amenoire

Reputation: 1892

Styling selected AngularUI radio button

Does anyone know what is the proper CSS selector for selected (:checked) AngularUI's radio button? I tried "checked", "selected", "active", but none of this does the work. I need to find a similar selector as :checked for HTML radio button.

Every useful answer / JSFiddle is highly appreciated and evaluated.

Thank you.

Upvotes: 0

Views: 69

Answers (2)

ShinyJos
ShinyJos

Reputation: 1487

Since you are using angularjs,instead of using jquery selectors like :checked or :active,you can just use the angularjs functionalities to detect the active checkbox.

    <div class="form-group">
    <label class="checkbox-inline">
        <input type="checkbox" name="favoriteColors" ng-click="yourFunction()" ng-model="formData.favoriteColors.red"> Red
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
    </label>
</div>

cosider this as your checkboxes,now in your js (ie)your controller 

    var formApp = angular.module('formApp', [])

.controller('formController', function($scope) {

    // we will store our form data in this object
    $scope.formData = {};
    $scope.yourFunction = function() {
        /**function to call when a checkbox with model formdata.favourite colors.red is selected **/
};

});

Notice I have include functions for only one checkbox.You can do it for each of these check boxes

You might find this fiddle useful

http://jsfiddle.net/ShinyMetilda/C9V39/

Also this example in the documentation will be usefull

https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

Upvotes: 1

Gruff Bunny
Gruff Bunny

Reputation: 27986

If it's styling you're after then use ng-class bound to the ng-model:

<input type="checkbox" ng-model='stuff' ng-class='{class1: stuff, class2: !stuff}'>

and add css rules for classes class1 and class2

Upvotes: 1

Related Questions