Angular JSのラジオボタンの値に応じて、HTMLにクラスを追加します。

Question

3つのラジオボタンがあります。選択したラジオボタンに応じて、ドロップダウンリストを1つ選択し、複数選択して無効にします。どんな助け？これにng-classを使用する範囲は何ですか？

ページロードで

、複数のRadioButtonがチェックされ、DDLが複数選択されます。） 私が変更した場合は、radiobuttonValue ==シングルは、その後、DDLは（複数選択 を削除し、通常のものでなければならないradiobuttonValue場合==すべて、その後、DDLは、マルチ選択して単一選択が異なるng-modelタイプ（配列対単一の値）を持っているので、あなたは自分の<select>要素のmultiple属性を変更することはできません

<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

を無効にする必要があります。

代わりに、使用する要素間の "スイッチ" に、ここに述べたように：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

あなたはこの方法でそれを行うことができます。

まず、あなたの3つのラジオボタンを定義します。

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

次のように選択controllを定義します。ここ

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

注：私たちはここに1つのカスタムディレクティブ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); 
      } 
     }); 
     } 
    } 
    }) 

uは選択フィールドで異なるデータをロードする必要があるラジオボタンに応じて、Plunker