Add class to HTML select depending on Radio button value in Angular JS

Question

I have 3 radio button. Depending upon the radio button selected, I want to make the dropdownlist single select and multiple select and disabled. Any Help? What is the scope of using ng-class for this?

On page load, Multiple RadioButton will be checked and the DDL will be Multi-select.) If I change, radiobuttonValue == single, then DDL should be normal one(remove multi-select and if radiobuttonValue == all, then DDL should be disabled

<div class="form-group">
                    <div class="col-sm-4">
                        <div class="radio">
                            <label>
                                <input type="radio" name="portRadios" id="portRadios1" value="single" ng-model="activity.portRadios">
                                Single Port
                            </label>
                            <label>
                                <input type="radio" name="portRadios" id="portRadios2" value="multiple" ng-model="activity.portRadios" checked="checked">
                                Multiple Port
                            </label>
                            <label>
                                <input type="radio" name="portRadios" id="portRadios3" value="all" ng-model="activity.portRadios">
                                All Ports
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">City/Port :</label>
                    <div class="col-sm-4">
                        <select multiple name="ActivityPort" class="form-control" ng-model="activity.selectedPort" ng-show="portradios == single" ng-options="b.Name for b in portList track by Name">
                            <option value="">-- Select a Port --</option>
                        </select>
                    </div>
                </div>

depending on radio button u have to load different data in select field ? — Gayathri Mohan
– Gayathri Mohan, Commented Jun 13, 2016 at 6:13
No , I want to make the dropdown list as single-value select/multiple-value select/Disabled — Nithisha Nasser
– Nithisha Nasser, Commented Jun 13, 2016 at 6:23
You want to select multiple value from drop down instead of one value? based on your radio button? is it right ? — Mohideen bin Mohammed
– Mohideen bin Mohammed, Commented Jun 13, 2016 at 6:30
you may use angular, ui-select element to get multiple value in drop down. — Mohideen bin Mohammed
– Mohideen bin Mohammed, Commented Jun 13, 2016 at 7:42

victmo · Accepted Answer · 2016-06-13 22:46:21Z

1

Since multi-selects and single-select have different ng-model types (single value vs array), you cannot just change the multiple attribute of your <select> element.

Instead, use ng-if to "switch" between elements, as stated here: https://docs.angularjs.org/error/$compile/selmulti

Radio buttons

<div ng-repeat="radio in c.radios" class="radio" >
    <label>
        <input type="radio" 
            ng-model="c.state"
            ng-value="radio.value"
            ng-change="c.setState(radio.value)"
        />
        <span ng-bind="radio.label"></span>
    </label>
</div>

Select field

<select multiple class="form-control"
    ng-if="c.isMulti"
    ng-model="c.selectedPorts"
    ng-disabled="c.isDisabled"
    ng-options="port.name for port in c.ports"
></select>
<select class="form-control"
    ng-if="!c.isMulti" 
    ng-model="c.selectedPorts"
    ng-options="port.name for port in c.ports"
></select>

Javascript

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

app.controller('MyController', function() {
    var self = this;


    self.ports = [
        {
            data: 'a', name: 'Port A'
        },{
            data: 'b', name: 'Port B'
        },{
            data: 'c', name: 'Port C'
        }
    ]


    // Radios
    self.radios = [{
        value: 'single',
        label: 'Single port'
    },{
        value: 'multi',
        label: 'Multiple ports'
    },{
        value: 'all',
        label: 'All ports'
    }];


    self.setState = function(state){
        self.state = state;
        self.isMulti = (self.state != 'single');
        self.isDisabled = (self.state == 'all');
        self.selectedPorts = (self.state == 'all') ? self.ports : null;
    }

    self.setState('single'); // Default state
    // You can call this function from a different element and
    // the new state will be automatically rendered.
});

Here's a working example: http://codepen.io/victmo/pen/JKXEWv

Cheers

edited Jun 13, 2016 at 22:46

answered Jun 13, 2016 at 7:44

victmo

1,21611 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

victmo Over a year ago

Care to say why the down vote? The provided example does what the OP is asking and there's a reference to a relevant part of the framework's documentation

RIYAJ KHAN Over a year ago

I have downvoted because there are code redundancy in html anf angular part.Please check my solution you will get an idea

Nithisha Nasser Over a year ago

I am not able to pass the selected values to View model in the Save Action Method. I am using @Html.BeginForm for form submit. Can you tell me why the selected values are not getting passed.

victmo Over a year ago

@RIYAJKHAN: I understand why you think there is "redundancy" in the html, but it's the way recommended in the documentation: docs.angularjs.org/error/$compile/selmulti Basically, Angular treats select and select[multiple] as two different elements and that's why it makes sense to use ng-if. Check the documentation example. A custom directive is a way to solve this problem but in this case I feel it's an overkill. You can disagree with me, that's ok, but I don't think that's a reason to downvote a working answer.

RIYAJ KHAN · Accepted Answer · 2016-06-13 12:35:36Z

0

You can do it in this way.

First define your three radio button :

<input type="radio" ng-model="multiSelectCheck" value="1">Multiple<br>
<input type="radio" ng-model="multiSelectCheck" value="0">single<br>
<input type="radio" ng-model="multiSelectCheck" value="-1">Disable<br>

Define select controll as follows:

 <select select-attr multiple-prop="multiSelectCheck">
    <option>Test1</option>
    <option>Test2</option>
    <option>Test3</option>
    <option>Test4</option>
  </select>

Note here : we defined here one custom directive select-attr and passed one model multiSelectCheck which is your radio button

Here is the directive defination :

directive('selectAttr', function() {

    return {
      restrict: 'AE',
      scope: {
        multiple: '=multipleProp' 
      },
      link: function(scope, ele, attr) {
        console.log(scope.multiple)
        scope.$watch(function() {
          return scope.multiple;
        }, function(newValue, oldValue) {

          ele.removeAttr('disabled', true);
          if (scope.multiple == 1) { //multiple selection
             ele.attr('multiple', true);
          } else if (scope.multiple == 0) { //single selection
             ele.removeAttr('multiple');
          } else if (scope.multiple == -1) { //disabled
            ele.attr('disabled', true);
          }
        });
      }
    }
  })

Here is working Plunker

answered Jun 13, 2016 at 12:35

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

8 Comments

Nithisha Nasser Over a year ago

Can you tell me how can I pass the selected values to a Controller Action method using view model.

Nithisha Nasser Over a year ago

"select-attr multiple-prop" For me it is showing as unknown attribute. And the code is not working. I am using Angular JS 1.5.5 @Riyaj khan

RIYAJ KHAN Over a year ago

Please check plunker.Its working.I have used angular 1.5.5

Nithisha Nasser Over a year ago

I checked and I was referring code via plunker only

RIYAJ KHAN Over a year ago

have you defined directive?

|

Collectives™ on Stack Overflow

Add class to HTML select depending on Radio button value in Angular JS

2 Answers 2

4 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related