如何在 angular-xeditable 中使用掩码？答案

【问题标题】：How to use mask in angular-xeditable?如何在 angular-xeditable 中使用掩码？
【发布时间】：2016-01-31 09:43:44
【问题描述】：

我需要将遮罩连接到 angular-xeditable。所以我将掩码连接到 angularjs。

<input id="phone" name="firstName" type="text" class="form-control mb5"  placeholder="(999) 999-9999" ng-model="vm.phoneNumber" ui-jq="mask" ui-options="'(999) 999-9999'">

但我不明白如何连接 angular-xeditable

<span id="phone" editable-text="vm.phone" e-placeholder="(999) 999-9999" e-form="tableform" onbeforesave="checkName3($data)">
   {{vm.phone || '-'}}
 </span>

此选项不起作用。

【问题讨论】：

您能描述症状以及您的预期吗？

标签： angularjs mask x-editable

【解决方案1】：

试试这个“e-*”

<span id="phone" editable-text="vm.phone" 
   e-placeholder="(999) 999-9999" 
   e-form="tableform" 
   e-ui-jq="mask" 
   e-ui-options="'(999) 999-9999'" 
   onbeforesave="checkName3($data)"> {{vm.phone || '-'}}
</span>

其他选项：

包括js

/bower_components/jquery.inputmask/dist/jquery.inputmask.bundle.js   



<span editable-text="ApTax" e-size="50" e-maxlength="50"
                              e-ng-model="ApTax" e-id="ApTax"
                              e-maskinput e-data-inputmask="'mask':'999-***'"
                              e-name="BAS" e-form="rowform" e-required>
                            {{ ApTax}}
 </span>

【讨论】：

【解决方案2】：

我使用angular-ui-mask 来检查掩码。

只需安装它：

bower install angular-ui-mask

在您的 html 中加载脚本文件（我希望您已经加载了 angular-xeditable 的脚本）：

<script src="bower_components/angular-ui-mask/dist/mask.js"></script>

将特定模块添加到您的依赖项中：

angular.module('myApp', ['ui.mask', ...])

你的代码是：

<span id="phone" editable-text="vm.phone" 
      e-ui-mask="(999) 999-9999" e-form="tableform"
      onbeforesave="checkName3($data)">
      {{vm.phone || '-'}}
</span>

注意，对于 angular-xeditable，您需要使用带有前缀“e-”的 angular-ui-mask 属性，例如“e-ui-mask”。

【讨论】：