Question

我正在尝试仅在选择另一个组合框时启用select2字段。这适用于文本框，普通输入甚至简单的选择元素，但是当我尝试对使用Ajax调用的select2使用ng-disabled时，它不起作用。

以下是我的代码的一部分：

<section class="col col-sm-4">
    <label class="label" data-localize="Tipo de Participante"></label>
    <select id="select_tipo_participante" name="select_tipo_participante" ng-model="filtros.F_ID_TIPO_PARTICIPANTE.Valor"
      class="select2" data-placeholder="Selecione..."
      ng-disabled="filtros.F_ID_USUARIO.Valor == null">
        <option value="null" data-localize="Selecione uma opção"></option>
        <option ng-repeat="tipo in dados_listas.tipos_participante" value="{{tipo.ID_TIPO_PARTICIPANTE}}">
            {{tipo.NM_TIPO_PARTICIPANTE}}
        </option>
    </select>
</section>

<section class="col col-sm-4">
    <label class="label" data-localize="Novo Usuário"></label>
    <input name="select_novo_usuario" id="select_novo_usuario" ng-model="filtros.F_ID_USUARIO.Valor" ng-disabled="filtros.F_ID_TIPO_PARTICIPANTE.Valor == null"/>
</section>
<section class="col col-sm-12">
    <label class="label" data-localize="Justificativa"></label>
    <textarea rows="3" class="form-control" name="justificativa_redesignacao" ng-model="DS_JUSTIFICATIVA" ng-disabled="filtros.F_ID_TIPO_PARTICIPANTE.Valor == null"></textarea>

我希望禁用第二个元素（id =“select_novo_usuario”），直到选择上一个元素。

使用ng-disabled的textarea工作正常。

这是我的ajax电话：

    $("#select_novo_usuario").select2({
    minimumInputLength: 4,
    allowClear: true,
    placeholder: localize.localizeText('tooltip_select_interessado'),
    ajax: {
        url: BACKEND_URL + 'usuario_interessado',
        dataType: 'json',
        type: "GET",
        quietMillis: 50,
         data: function (term) {
                var filter = 'NM_USUARIO,like,' + term;
            return {
                filters: filter,
                filter_id_interessado: 'ID_USUARIO,notin,teste.teste'
            };
        },
        results: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.NM_USUARIO,
                        slug: item.NM_USUARIO,
                        id: item.ID_USUARIO
                    }
                })
            };
        },
    },
});

$("#select_novo_usuario").on("select2-selecting", function(e) {
    $timeout(function(){
        $scope.$evalAsync(function() {
            $scope.filtros.F_ID_USUARIO.Valor = e.val;
        });
    });
});

我怎样才能让它发挥作用？

Answer 1

我无法使用ng-disabled使其正常工作，所以我在我的.js文件中做了这个，使我想要禁用的选择响应前一个的$ watch。这是我的代码作为样本：

$scope.$watch('filtros.F_ID_TIPO_PARTICIPANTE.Valor', function(newVal, oldVal, scope) {
if(newVal != null) {
    $('#select_novo_usuario').select2("enable", true);
    $('#select_novo_usuario').select2("val", "");
}
$('#select_novo_usuario').select2("enable", false);
$('#select_novo_usuario').select2("val", "");});

Answer 2

ng禁用似乎不适用于Select2

尝试一下：

//As of Select2 4.1, they've removed support for .enable
$("select").prop("disabled", true); 
// instead of $("select").enable(false);

使用ng-disabled和输入select2

2 个答案: