Question

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

Answer 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，变量的数据是动态更新的，你可以通过{{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会很好，一般来说这是一个很好的做法！

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

1 个答案: