Question

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

在页面加载时，将检查多个RadioButton并且DDL将是多选的。）如果我改变，radiobuttonValue == single，那么DDL应该是正常的（删除多选如果radiobuttonValue == all，则应禁用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类型（单值与数组），因此您不能只更改multiple元素的<select>属性。

相反，使用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 controll：

 <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

根据Angular JS中的单选按钮值，将类添加到HTML中

2 个答案: