啓用和禁用所需的Angular JS

Question

即時通訊使用Angular JS做一個表單，我需要在選項select的onchange事件中關閉一些輸入。

如果我選擇某些選項，我必須停用像4個輸入，並通過這樣做我不能夠sumbit形式，直到我寫入輸入，所以我可以停用這些輸入，並刪除所需的選項投入？以便在表單上隱藏剩餘信息而不要求我提供停用輸入。

謝謝。

<?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（輸入） { 選項= $（輸入）.find（ 「選項：選擇」）。文本（）; console.log（Option）; （「＃只讀」，true）;如果（選項==「PBX」） if（Option ==「PBX」） // Desabilitando los inputs $（「＃num_discoduro」）。 //$("#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，否則就不是。