如何使用 AngularUI ui-mask 和 ng-repeat 查看屏蔽值和未屏蔽值？

Question

我正在使用 AngularUI 的 ui-mask 指令来屏蔽 phone 数字。我们想将屏蔽和未屏蔽的值都保存到数据库中。

我看到文档可以选择使用 model-view-value="true" 将 $viewValue 存储为模型，为我们提供屏蔽值。

但是，由于我们两者都想要，所以我更喜欢保留此 false 并自行访问 $viewValue 的方法。我在 demo 中看到，但这是针对单个输入的。它看起来像是绑定到输入的名称。

我的问题是这是一个 ng-repeat，所以名称各不相同。我让它适用于单个项目（您可以在第一个 table 中看到它有效）。

最后一个 <td> 是我试图显示 $viewValue 的地方。我也试图将它传递给 setPhoneValue 函数，但它在那里也未定义。

编辑：创建了 fiddle：https://jsfiddle.net/n35u7ncz/

<form name="phone_form" id="crm_phonegrid" ng-app="crm_phonegrid" ng-controller="phoneCtrl">
    <table cellpadding="2">
        <tr>
            <td><input type="text" name="new_phone" placeholder="Number" ng-model="addNumber.phoneNumber" onfocus="onFocusUpdateMask()" ui-mask="{{mask}}" ui-mask-placeholder ui-mask-placeholder-char="_" /></td>
            <td><select name="phoneTypeSelect" ng-model="addNumber.phoneType" ng-options="option.name for option in phoneTypeOptions track by option.Value"></select></td>
            <td><input type="button" ng-click="addNumber()" value="Add" /></td>
            <td>{{phone_form.new_phone.$viewValue}}</td>
            <td>{{addNumber.phoneNumber}}</td>
        </tr>
    </table>
    <table cellpadding="2">
        <thead>
            <tr>
                <th>Phone Link</th><th>Phone Number</th><th>Phone Type</th><th>Primary Flag</th><th>Mask</th><th>View</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="number in numbers">
                <td><a style="color:#1160B7;text-underline-position:below" href="" ng-click="openPhoneRecord(number)">{{ number.crm_phonenumber }}</a></td>
                <td><input type="text" id="crm_phonegrid_number" name="phone_number_input" model-view-value="true" ng-model="number.crm_phonenumber" ng-change="setPhoneValue(number)" ui-mask="{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}" ui-mask-placeholder ui-mask-placeholder-char="_" /></td>
                <td><select name="phoneTypeSelect" ng-model="number.crm_phonetypecode" ng-change="setValue(number)" ng-options="option.name for option in phoneTypeOptions track by option.Value"></select></td>
                <td><input type="radio" name="primary" id="primaryRadio" ng-checked="number.crm_isprimary" ng-model="number.crm_isprimary" ng-change="setValue(number)" ng-value="number.crm_isprimary" ng-click="setFlag(number)" /></td>
                <td>{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}</td>
                <td>View: {{phone_form.phone_number_input.$viewValue}}</td>
            </tr>
        </tbody>
    </table>
</form>

Answer 1

我们成功了。诀窍是使用 $index 为元素生成唯一的 Id，然后将其传递给控制器。

我在这里更新了 fiddle：https://jsfiddle.net/n35u7ncz/3/

大体的思路是输入字段需要被标记并且有一个ng-change:

<input type="text" id="phone_input_id" name="phone_input_name_{{$index}}" ng-model="number.crm_phonenumber" ng-change="setValue(number, $index)" ui-mask="{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}" ui-mask-placeholder ui-mask-placeholder-char="_" />

然后：

      $scope.setValue = function(item, index)
      {
        item.crm_phonenumbermasked = $scope.phone_form["phone_input_name_" + index].$viewValue;
      }

如何使用 AngularUI ui-mask 和 ng-repeat 查看屏蔽值和未屏蔽值？

How to see both masked and unmasked values with AngularUI ui-mask and ng-repeat?

angularjs

angular-ui