启用和禁用所需的 Angular JS

Question

我正在使用 Angular JS 做一个表单，我需要在选项选择的 onchange 事件中停用一些输入。

如果我选择某个选项，我必须像 4 个输入一样停用，并且这样做我无法汇总表单，直到我在输入上写一些东西，所以我如何停用这些输入并删除输入的所需选项?为了在不询问我停用输入的情况下汇总表单上的剩余信息。

谢谢。

<?php 
    $consultar = new Consultar();
    $result    = $consultar->_ConsultartiposProcesosCobranza();
    $num_rows  = pg_num_rows($result);

    //Consultar OS
    $resOs     = $consultar->_ConsultarOS();
    $num_os    = pg_num_rows($resOs);

    //Consultar Tipo Servidor
    $resServidor = $consultar->_ConsultarTipoServidor();
    $num_servidor = pg_num_rows($resServidor);
?>

<style>
    .Desc   {margin-right: 12%; margin-top: 3%; text-align: center;}
    .TopMAr {margin-top: 2%;}
</style>

<div class="col-xs-12 col-md-12 FormularioCobranza" data-ng-app="" >
    <h2 class="text-center">Formulario ejecutables Cobranza</h2>
    <div class="col-xs-12 alert alert-success text-center" id="AlertAgregar" style="display:none;"> 
        <label class="text-center">Servidor Agregado</label>
    </div><!-- AlertAgregar-->

    <form id="form" name="form">    


        <div class="col-xs-4" ng-class="{ 'has-success': form.num_servidor.$valid}"> 
            <label>Servidor: </label>
            <input type="text" placeholder="número de Servidor" class="form-control" name="num_servidor" id="num_servidor" 
            required ng-model="usuario.num_servidor" >
            <div class="col-xs-6 IzquierdaEspacio" ng-show="form.num_servidor.$dirty " style="position: absolute;" id="servidor_valid">
                <p class="help-block text-danger" ng-show="form.num_servidor.$error.required"> Campo Obligatorio</p>
            </div>  
        </div>

        <div class="col-xs-4" ng-class="{ 'has-success': form.num_discoduro.$valid}"> 
            <label>Disco Duro: </label>
            <input type="text" placeholder="Cantidad En GB" class="form-control" name="num_discoduro" id="num_discoduro" 
            required  ng-model="usuario.num_discoduro" >
            <div class="col-xs-6 IzquierdaEspacio" ng-show="form.num_discoduro.$dirty " style="position: absolute;">
                <p class="help-block text-danger" ng-show="form.num_discoduro.$error.required"> Campo Obligatorio</p>
            </div>  
        </div>

        <div class="col-xs-4" ng-class="{ 'has-success': form.num_ram.$valid}"> 
            <label>Ram: </label>
            <input type="text" placeholder="Cantidad En GB" class="form-control" name="num_ram" id="num_ram" 
            required ng-model="usuario.num_ram" >
            <div class="col-xs-6 IzquierdaEspacio" ng-show="form.num_ram.$dirty " style="position: absolute;">
                <p class="help-block text-danger" ng-show="form.num_ram.$error.required"> Campo Obligatorio</p>
            </div>  
        </div>

        <div class="col-xs-4 TopMAr" ng-class="{ 'has-success': form.num_discoactual.$valid}"> 
            <label>Disco Duro Usado: </label>
            <input type="text" placeholder="Cantidad En GB" class="form-control" name="num_discoactual" id="num_discoactual" 
            required ng-model="usuario.num_discoactual" >
            <div class="col-xs-6 IzquierdaEspacio" ng-show="form.num_discoactual.$dirty " style="position: absolute;">
                <p class="help-block text-danger" ng-show="form.num_discoactual.$error.required"> Campo Obligatorio</p>
            </div>  
        </div>

        <div class="col-xs-4 TopMAr" ng-class="{ 'has-success': form.num_ramactual.$valid}"> 
            <label>Ram Usado: </label>
            <input type="text" placeholder="Cantidad En GB" class="form-control" name="num_ramactual" id="num_ramactual" 
            required ng-model="usuario.num_ramactual" >
            <div class="col-xs-6 IzquierdaEspacio" ng-show="form.num_ramactual.$dirty " style="position: absolute;">
                <p class="help-block text-danger" ng-show="form.num_ramactual.$error.required"> Campo Obligatorio</p>
            </div>  
        </div>

        <div class="col-xs-4 TopMAr" ng-class="{ 'has-success': form.id_os.$valid}"> 
            <label>Sistema Operativo: </label>
            <select class="form-control" id="id_os" name="id_os" required ng-model="usuario.id_os">
                <option value="">Seleccionar...</option>
                <?php 
                    for($i=0; $i<$num_os; $i++)
                    {
                        $filaOs = pg_fetch_array($resOs);
                        $nb_os  = $filaOs['desc_osc'];
                        $id_os  = $filaOs['id'];

                        echo '<option value="'.$id_os.'">'.$nb_os.'</option>';
                    }
                ?>
            </select>
            <div class="col-xs-6 IzquierdaEspacio" ng-show="form.id_os.$dirty " style="position: absolute;">
                <p class="help-block text-danger" ng-show="form.id_os.$error.required"> Campo Obligatorio</p>
            </div>  
        </div>

        <div class="col-xs-4 TopMAr" ng-class="{ 'has-success': form.id_servidor.$valid}"> 
            <label>Tipo: </label>
            <select class="form-control" id="id_servidor" name="id_servidor" required ng-model="usuario.id_servidor" onchange="VerificarTipoServidor(this)">
                <option value="">Seleccionar...</option>
                <?php 
                    for($i=0; $i<$num_servidor; $i++)
                    {
                        $filas       = pg_fetch_array($resServidor);
                        $desc_ser    = $filas['desc_servidor'];
                        $id_servidor = $filas['id'];

                        echo '<option value="'.$id_servidor.'">'.$desc_ser.'</option>';
                    }
                ?>
            </select>
            <div class="col-xs-6 IzquierdaEspacio" ng-show="form.id_servidor.$dirty " style="position: absolute;">
                <p class="help-block text-danger" ng-show="form.id_servidor.$error.required"> Campo Obligatorio</p>
            </div>  
        </div>

        <div class="col-xs-12" style="margin-top:3%">   
            <div class="col-xs-5 pull-right" style="margin-right: 14%;">
                <input type="button" value="Cancelar" id="btn-danger" onclick="Cancelar()" class="btn btn-danger">
                <input type="button" value="Enviar" id="btn-cobranza" onclick="GuardarEjecutable()" class="btn btn-success" ng-disabled="form.$invalid">
                <!--<input type="button" value="Enviar" id="btn-cobranza" ng-click="usuarios(usuario)" class="btn btn-success">-->
            </div>
        </div>
    </form> 
</div><!-- añadir cobranza-->

函数 VerificarTipoServidor(输入) { Option = $(input).find("option:selected").text(); 控制台.log（选项）； 如果（选项=="PBX"） { //Desabilitando los 输入 $("#num_discoduro").prop("readonly",true); //$("#num_ram").prop("readonly",true); //$("#num_discoactual").prop("readonly",true); //$("#num_ramactual").prop("readonly",true);

        //Pruebas
        $("#num_discoduro").removeAttr("required");
        $("#num_ram").removeAttr("required");
        $("#num_discoactual").removeAttr("required");
        $("#num_ramactual").removeAttr("required");

        $("#num_discoduro").val("200");
        $("#num_ram").val("200");
        $("#num_discoactual").val("200");
        $("#num_ramactual").val("200");

    }//if
    else
    {
        $("#num_discoduro").prop("disabled",false);
        $("#num_ram").prop("disabled",false);
        $("#num_discoactual").prop("disabled",false);
        $("#num_ramactual").prop("disabled",false);
    }//else
}//VerificarTipoServidor

Answer 1

看看ng-required。

https://docs.angularjs.org/api/ng/directive/input

效果如你所愿：

ng-required="myVarible"，当myVariable为真时，必填，否则不填。