AngularJS Dynamicフォーム内のテキストボックスを無効にする

Question

ボタンをクリックした後、私のangularJS動的フォーム内のテキストボックスを無効にする必要があります。ダイナミックフォームの外でテキストボックスを無効にする場合、私のコードは正常に動作しているようですが、ダイナミックフォーム内のテキストボックスのIDを取得すると機能しません。何が問題なのか。 ng-disabledを使用しないのはなぜ

$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

のように見えます。コントローラーコードの中のどこかにテキストを再度有効にするには、$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 } 

    ]; 

提案：

私は上記のコードにいくつかの疑問を持っているとして、あなたはちょうどあなたが入力フィールドでng-modelを使用しているので、変数のデータが更新され、$scope.LanguageFormData.languageを使用することができます動的に、あなたはHTMLで出力を印刷{{LanguageFormData.language}}ことによってこれを確認することができます

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を制限し、その良い練習が一般的に従うことがあればそれは良いでしょう！