如何通过以角度从另一个模板调用来重置文本字段

Posted 2023-05-09

【中文标题】如何通过以角度从另一个模板调用来重置文本字段

【英文标题】：How to reset the Text field by calling from another template in angular

【发布时间】：2018-03-25 20:18:54

【问题描述】：

在下面的图片中，第一个是下拉的安全问题，第二个是我想在更改问题时为空的文本框

但问题是它们都是不同的模板，它们都没有任何链接 我使用一个控制器将正则表达式放在它们之间。这工作正常。但问题是我在更改安全问题时无法清除文本框。

Bellow 是我的安全问题下拉模板。模板非常大，所以只是模板代码的必需部分。 请参考data-ng-click的第二部分

<li data-ng-repeat="char in characteristic.getAvailableValues() | filter: value: searchFilter"
                        data-ng-class="violatesCompatibilityRule: characteristic.doesValueViolateCompatibilityRule(char.id)">
                        <a id="vm.productSpecIdPath---characteristic.characteristicSpecId---char.id---dropdownitem"
                        role="menuitem"
                        tabindex="-1"
                        href="javascript:void(0)"
                        data-ng-click="vm.selectCharacteristicValue(char.id); $root.securityQuestionRegex=characteristic.getSelectedValues()[0].regularExpression"
                        data-ng-bind="char.value">
                        </a>

下面是输入框的模板。 请看 ng-change

<input ng-if="characteristic.getDisplayName() == 'Security Answer'"
          type="text"
          placeholder="'LABELS.USERDEFINEDCHARACTERISTICS.PLACEHOLDER.TEXT' | translate"
          id="vm.productSpecIdPath---characteristic.getUserDefinedCharacteristicId()---$index---input"
          name="characteristic.getUserDefinedCharacteristicId()-$index"
          data-ng-model="value.value"
          data-ng-change="value.value=$root.textboxRegexValidation(value.value);"
          data-ng-disabled="characteristic.isReadOnly() || vm.isReserved"             
          data-ng-class=" isReadOnly: characteristic.isReadOnly(), 'reduced-input-width': characteristic.getTooltipId(), dirty: characteristic.isDirty() "
          sigma-validation-pattern="characteristic.getRegularExpression()"/>    

下面是我的控制器代码部分

        $rootScope.textboxRegexValidation = function (obj: any) 


        if ($rootScope.securityQuestionRegex) 
            var regEx = new RegExp($rootScope.securityQuestionRegex);
            if (regEx.test(obj)) 
                return obj;
             else 
                return obj.substring(0, obj.length - 1);
            
         else 
            return obj;
        
    

【问题讨论】：

请忽略安全问题模板中为 $root.securityQuestionRegex 分配的值。您可以将其假设为传递给它的任何正则表达式字符串:)

【参考方案1】：

哟..我得到了解决方案 我在下拉模板“$root.emptyTextFlag”的 ng-click 中添加了一个额外的标志

<a id="vm.productSpecIdPath---characteristic.characteristicSpecId---char.id---dropdownitem"
                        role="menuitem"
                        tabindex="-1"
                        href="javascript:void(0)"
                        data-ng-click="vm.selectCharacteristicValue(char.id); $root.securityQuestionRegex=characteristic.getSelectedValues()[0].regularExpression; $root.emptyTextFlag = true"
                        data-ng-bind="char.value">
                        </a>

在我的文本框字段中，我使用了 ng-value，它在运行时评估我的角度表达式 "ng-value="value.value= $root.checkEmptyTextFlag() ？ '' : value.value"

 <input ng-if="characteristic.getDisplayName() == 'Security Answer'"
          type="text"
          placeholder="'LABELS.USERDEFINEDCHARACTERISTICS.PLACEHOLDER.TEXT' | translate"
          id="vm.productSpecIdPath---characteristic.getUserDefinedCharacteristicId()---$index---input"
          name="characteristic.getUserDefinedCharacteristicId()-$index"
          data-ng-model="value.value"
          data-ng-change="value.value= $root.textboxRegexValidation(value.value) "
          ng-value="value.value= $root.checkEmptyTextFlag() ?  '' : value.value"
          data-ng-blur= "$root.isMappingRuleTrigger(characteristic.getUserDefinedCharacteristicId()) ? vm.emitToggledEvent() : 'false'"
          data-ng-disabled="characteristic.isReadOnly() || vm.isReserved"             
          data-ng-class=" isReadOnly: characteristic.isReadOnly(), 'reduced-input-width': characteristic.getTooltipId(), dirty: characteristic.isDirty() "
          sigma-validation-pattern="characteristic.getRegularExpression()"/>    

最后在我的控制器中，我使用函数 checkEmptyTextFlag() 中的 setTimeout 来切换标志

$rootScope.textboxRegexValidation = function (obj: any) 
        if ($rootScope.securityQuestionRegex) 
            var regEx = new RegExp($rootScope.securityQuestionRegex);
            if (regEx.test(obj)) 
                return obj;
             else 
                return obj.substring(0, obj.length - 1);
            
         else 
            return obj;
        
    ; 

    $rootScope.checkEmptyTextFlag = function (obj: any) 
        if($rootScope.emptyTextFlag == true)
            setTimeout(function () 
                $rootScope.emptyTextFlag= false;
              , 100);    
            return true;
        
    

当我从下拉菜单中单击任何选项时，它会更改 $root.emptyTextFlag = true 的标志，因此在文本框中它会清除文本并在 1/10 秒后再次使其变为 false，这让我启用在文本框中输入。它现在可以工作了..我很高兴:) :P