2017-11-13 5 views
0

同じidを使用する複数の条件を持つ角度jを使用しています。真の条件からテキストを取得する必要があります。複数のIDを使用すると、表示されている要素からテキストが取得される

私がリリースしようとしているアプリに大きなバグが見つかりました。 私はangularjs/ionic vs 1を使用していて、私のhtmlの条件を使い分けています。 これらの条件は素晴らしい結果をもたらし、私が見せたいものを示します。 しかし、私は情報を保存するたびに、各条件が同じidを持つ要素idを取り出し、私に可視状態のテキストを与える代わりに、それらのすべてを取得します。 IDテキストが表示されている場合にのみ、IDテキストを取得する方法が必要です。テスト中にこれが見逃された場合を除き、これは以前から使用されていました。 コントローラ内のIDを確認しています。

function JqliteIds(id) { 
     // var myElement = angular.element(document.querySelector('#some-id')); 
     var p = angular.element(document.getElementById(id)).text().trim(); 
     p = p.replace(/(\r\n|\n|\r)/gm, " "); 
     p = p.replace(/ +/g, ' '); 
     return p; 
     //stepTwoFormula = stepTwoFormula.replace(/(\r\n|\n|\r)/gm, " "); 
     //stepTwoFormula = stepTwoFormula.replace(/ +/g, ' '); 
    } 

複数の条件を持つhtmlフォーム。 idが... ID =「stepOneFormula」とすぐに私は、私はNG-ショーに読み始め、この質問を投稿NG-場合とNG-場合に私のNG-ショーを変更するよう

 <div class="item item-text-wrap"> 
     <div ng-if="level.light"> 
      <div ng-show="level.stepOne.bleachAdditiveType < 0"> 
       <p id="stepOneFormula"> 
        Mix {{config.productTypes[level.stepOne.productType]}} with 
        <span ng-if="level.stepOne.productType === 1 || level.stepOne.productType === 2"> 
         the manufacturer suggested developer or 
        </span> {{level.stepOne.peroxideVolume}} volume/{{level.stepOne.peroxidePercentage}} percent peroxide until it is the consistency of mayonnaise. 
       </p> 
      </div> 

      <div ng-show="level.stepOne.bleachAdditiveType > -1"> 
       <p id="stepOneFormula"> 
        Add approximately {{config.partsInches[level.stepOne.bleachInches]}} of 
        {{config.productTypes[level.stepOne.bleachAdditiveType]}} to {{config.productTypes[level.stepOne.productType]}}. Mix with 
        <span ng-if="level.stepOne.productType === 1 || level.stepOne.productType === 2"> 
         the manufacturer suggested developer or 
        </span> {{level.stepOne.peroxideVolume}} volume/{{level.stepOne.peroxidePercentage}} percent peroxide until it is the consistency of mayonnaise. 
       </p> 
      </div> 
     </div> 
     <div ng-if="!level.light"> 
      <p> 
       <!--Going Red--> 
       <div ng-show="level.stepOne.redRootsTonePercentOne > -1"> 
        <div id="stepOneFormula" ng-include="'app/formula-result/service-types/double-process/red-rootsDbl1.html'"></div> 
       </div> 
       <!--Mixed Levels of gray--> 
       <div ng-show="level.stepOne.grayTonePercentFour > -1"> 
        <div id="stepOneFormula" ng-include="'app/formula-result/service-types/double-process/gray-mixedDbl1.html'" data="level.stepOne"></div> 
       </div> 
       <!--Regular Levels--> 
       <div ng-show="level.stepOne.grayTonePercentFour === -1 && level.stepOne.redRootsTonePercentOne === -1"> 
        <div id="stepOneFormula" ng-include="'app/formula-result/service-types/double-process/genericDbl1.html'"></div> 
       </div> 
      </p> 
     </div> 
    </div> 
+3

id値は、ドキュメント(ページ)内で一意である必要があります。 2つの要素のid値が同じ場合は、あなたと同じドライバライセンス番号を持つ他の要素と同じです。 – Pointy

+0

[DOM内に要素が表示されているかどうかの確認]の可能な複製(https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom) – jwebb

答えて

0

です...出来た。 https://docs.angularjs.org/api/ng/directive/ngIf

要素が表示されているかどうかを確認する必要はありません。 ng-showとは異なり、ngIfディレクティブは要素を削除または再作成します。だから、もしそれが作成されていなければ、そこにはないので、idは無関係です。

関連する問題