Question

我使用具有多个条件的角度js都使用相同的id。需要从正确的条件中获取文本。

我刚刚发现了即将发布的应用中的一个大错误。我使用angularjs / ionic vs 1并在我的html中使用分配条件。这些条件产生了很好的结果，并显示了我想要展示的内容。但是每当我保存信息时，它都会获取元素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”

     <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>

Answer 1

当我发布这个问题时，我开始阅读ng-show，ng-if并将我的ng-shows更改为ng-if ...它有效。 https://docs.angularjs.org/api/ng/directive/ngIf

不需要检查元素是否可见。与ng-show不同，ngIf指令删除或重新创建元素。所以，如果没有创建它就不存在，所以id是无关紧要的。

使用多个ID可以从可见的元素中获取文本

1 个答案: