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

2019年7月28日 92次阅读

单击按钮后,我需要禁用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/>

最佳答案 为什么不使用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,变量的数据是动态更新的,你可以通过{ {LanguageFormData.language}}在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会很好,这是一个很好的做法！

点赞