禁用AngularJS中的文本框動態表單

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爲一個特定的元素單獨，它的一個很好的做法一般遵循這將是一件好事！