將類添加到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