在 AngularJS 动态表单中禁用文本框

Posted 2023-02-22

【中文标题】在 AngularJS 动态表单中禁用文本框

【英文标题】：Disable textbox inside an AngularJS Dynamic form

【发布时间】：2018-02-07 14:50:38

【问题描述】：

单击按钮后，我需要禁用 angularJS 动态表单中的文本框。如果我要禁用动态表单外的文本框，我的代码似乎工作正常，但是当我在动态表单内获得文本框的 ID 时，它不起作用。可能是什么问题。

$scope.copyText = function () 
    document.getElementById('copyText').disabled=true;
    document.getElementById('bName').disabled=true;
    document.getElementById('pName').disabled=true;
    // $('#bName').attr('disabled', true);
    //alert('#bName');

     $scope.LanguageFormData.language = [
             bName:  document.getElementById('brandName').value, pName:  document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature:  document.getElementById('pfeatureNew').value, lIngredient:  document.getElementById('pingredientNew').value, lInstruction:  document.getElementById('pinstructionNew').value, languageCat: null 

    ]; 

我的视图是这样的

<div class="col-md-12" class="pull-right" >                                           
     <button  class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" value="">COPY</button>

  </div>  

   </div>
   <div id="web" ng-repeat="languageItem in LanguageFormData.language">
        <div class="row col-xs-12">
               <div class="col-xs-6">
              <br/><br/>
      <div class="form-group">                                           
           <label class="col-md-6 control-label">Brand Name: </label>
                <div class="col-md-6">                                           
                     <input type="text" class="form-control" ng-required="true" name="bName" id="bName" class="form-control" ng-model="languageItem.bName"   required/>

               </div> 
            </div><br/><br/><br/>
     <div class="form-group">                                           
           <label class="col-md-6 control-label">Product Name: </label>
                <div class="col-md-6">                                           
                    <input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" required/>
                      </div> 
             </div><br/><br/><br/>

【参考方案1】：

为什么不使用ng-disabled。您需要将 $scope.disableThis=false; 改回 false 以在控制器代码中的其他位置重新启用文本。

$scope.copyText = function () 
    $scope.disableThis=true;

     $scope.LanguageFormData.language = [
             bName:  document.getElementById('brandName').value, pName:  document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature:  document.getElementById('pfeatureNew').value, lIngredient:  document.getElementById('pingredientNew').value, lInstruction:  document.getElementById('pinstructionNew').value, languageCat: null 

    ]; 

建议：

我对上面的代码有些疑惑，你可以直接使用$scope.LanguageFormData.language，因为你在输入字段中使用ng-model，变量的数据是动态更新的，你可以通过@查看987654326@ 以 html 格式打印输出

HTML：

<div class="col-md-12" class="pull-right" >                                           
     <button  class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" ng-disabled="disableThis" value="">COPY</button>

  </div>  

   </div>
   <div id="web" ng-repeat="languageItem in LanguageFormData.language">
        <div class="row col-xs-12">
               <div class="col-xs-6">
              <br/><br/>
      <div class="form-group">                                           
           <label class="col-md-6 control-label">Brand Name: </label>
                <div class="col-md-6">                                           
                     <input type="text" class="form-control" ng-required="true" name="bName" id="bName" ng-disabled="disableThis" class="form-control" ng-model="languageItem.bName"   required/>

               </div> 
            </div><br/><br/><br/>
     <div class="form-group">                                           
           <label class="col-md-6 control-label">Product Name: </label>
                <div class="col-md-6">                                           
                    <input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" ng-disabled="disableThis" required/>
                      </div> 
             </div><br/><br/><br/>

建议：

如果您只限制一个特定元素的 ID 会很好，一般来说这是一个很好的做法！