将类添加到HTML选择，取决于Angular JS中的单选按钮值。

Question

我有3个单选按钮。根据所选的单选按钮，我希望使下拉列表单选，多选和禁用。任何帮助？使用ng-class的范围是什么？

在页面加载，多个单选按钮将被检查和DDL将多选）。 如果我改变，radiobuttonValue ==单，然后DDL应该是正常的（除去多选 如果radiobuttonValue ==所有，然后DDL应该禁用

<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> 

Answer 1

由于多选择和单选有不同ng-model类型（单值VS数组），你不能改变你的<select>元素的multiple属性。

相反，使用ng-if到元素之间的 “开关”，如下所述：https://docs.angularjs.org/error/$compile/selmulti

单选按钮

<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 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. 
}); 

这里有一个工作示例：http://codepen.io/victmo/pen/JKXEWv

干杯

Answer 2

你能做到这样。

首先定义你的三个单选按钮：

<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> 

定义选择控制研究如下：

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

注意这里：我们在这里一个自定义指令select-attr定义，并通过一个模型multiSelectCheck这是你的收音机按钮

以下是指令定义：

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); 
      } 
     }); 
     } 
    } 
    }) 

这里工作Plunker