在 AngularJS 中将数据从视图绑定到控制器

Binding data from view to controller in AngularJS

本文关键字：视图 绑定 控制器 数据 AngularJS      更新时间：2023-09-26

您好，我正在构建一个角度应用程序，但我的条纹表单中遇到了问题。基本上，我将卡号，到期日期和CVC代码等数据从视图发送到控制器的条带回调，但我还想添加要支付的金额。所以我把它添加到我的表格中：

<form stripe-form="handleStripe" name="myForm">
    <!-- input added for the price -->
    <div class="row" ng-if="!unregistered_user">
        <div class="input-field col col-xs-12">
            <label for="name">Amount </label>
            <input name='price' type="number" id="amount" ng-model="price">
        </div>
    </div>
<!-- credit/debit card form -->
    <div class="row">
        <div class="input-field col col-xs-12">
            <label for="cardn">Card number</label>
            <input type="text" name="number" id="cardn"  ng-model="number" payments-validate="card" payments-format="card" payments-type-model="type" ng-class="myForm.number.$card.type"/>
        </div>
    </div>
    <div class="row">
        <div class="input-field col-xs-6">
            <label for="exp">Expiry</label>
            <input type="text" id="exp" ng-model="expiry" payments-validate="expiry" payments-format="expiry" />
        </div>
        <div class="input-field col-xs-6">
            <label for="cvc">CVC</label>
            <input type="text" id="cvc" ng-model="cvc" payments-validate="cvc" payments-format="cvc" payments-type-model="type"/>
        </div>
    </div>
    <div class="row">
        <div class="input-field col-xs-12">
            <button type="submit" class="btn btn-primary btn-large">Pay {{ price }}</button>
        </div>
   </div>
</form>

在控制器中，我有这个变量：

▸   $scope.price = 0;

当我第一次加载页面时，我可以看到价格输入的数量与我在变量 $scope.price 中输入的金额完全相同。但是当我在页面中更改它并提交表单时，$scope.price 始终为 0。这就像数据从控制器传递到视图，而不是从视图返回到控制器的方式。

我该如何解决这个问题？

我认为您的问题在于 ng-if 将您的输入与价格模型包装在一起。 ng-if创建自己的范围，在您的情况下，价格与ng-if内部的范围相关联，而不是与您的控制器相关联。你可以改用ng-show，或者像这样设置模型：ng-model = "$parent.price"或使用controllerAs语法，你不必再担心这个问题了。

相关文章：