Question

我正在使用angular-credit-cards来创建信用卡表单。信用卡号码具有以下设置：

<!--... form stuff ...-->
<div class="form-group" ng-class="{'has-success': donationForm.ccNumber.$valid}">
  <label for="ccNumber">Credit Card Number</label>
  <div class="input-group">
    <input type="text" class="form-control" name="ccNumber" ng-model="credit_card.number" cc-number cc-eager-type/>
    <div class="input-group-addon">{{donationForm.ccNumber.$ccEagerType}}</div>
  </div>
</div>
<!--... more form stuff ...-->

提交此表单时，它会调用一个创建Paypal付款的功能。 Paypal付款需要信用卡类型。 angular-credit-cards根据cc-number指令所属的输入动态确定信用卡类型，并将其存储在输入的$ ccEagerType中。但是，如何从输入中获取此数据并将其传递给控制器？

我尝试了以下内容：

<input type="hidden" ng-model="credit_card.type" ng-value="donationForm.ccNumber.$ccEagerType"/>

但是donationForm.ccNumber。$ ccEagerType没有被绑定到credit_card.type。

提前致谢。

Answer 1

阅读那个github项目的readme.md，我们发现了这个：

热切匹配的类型将在模型控制器上以$ccEagerType的形式提供。

您可以通过表单名称和输入名称在父控制器中访问它：

$scope.donationForm.ccNumber.$ccEagerType

在您的情况下，ccNumber是输入名称。 donationForm是表单的推断名称，但您尚未在代码中发布。

Ben Drucker在自定义指令ccNumber中需要ngModelController。阅读AngularJS documentation about ngModelController，了解如何处理从指令内修改的内容。

编辑： （来自角度信用卡的作者）

我建议避免使用隐藏的输入。您明确地将请求体的值明确地添加到PayPal而不是隐式绑定它，你会好得多。

此外，您应该考虑将$ccType用于完整卡片。急切输入旨在显示颁发者徽标或其他UI功能。 $ccType匹配更严格的正则表达式以获取完整的卡号。可以实现定义$ccEagerType但<input/>无效且因此$ccType未定义的状态。

Answer 2

似乎隐藏元素的问题，ng-model绑定无法使用它。

角色模型绑定在发布表单
时没有传递隐藏字段

尝试以下代码

<input type="text" style="display: none;" ng-model="credit_card.type" 
ng-value="donationForm.ccNumber.$ccEagerType"/>

Refer this SO Answer

如何将Angular输入指令数据传递给控制器

2 个答案: