javascript - ng-repeat 在模板 Angularjs 中

Question

我有一个付款指令如下。付款可以有多种不同的付款方式之一。模板旁边有一个选择列表，它应该来自传入的付款方式列表。

但目前选择列表中没有填充任何内容。

我对 Angular 还很陌生。

支付指令

angular.module('filanthropyApp.directives', [])
.directive('payment', function () {
return {
    restrict: 'EA',      
    templateUrl: '/Content/filanthropyApp/Directives/Templates/payment.html',
    replace: true,
    scope: {
        paymentMethods: '=paymentMethods'

    }
 };
});

支付模板

<div>
<div class="col-md-8 input-group">
    <label class="control-label col-md-4">Payment Amount</label>
    <input type="text" class="form-control" value="{{payment.Amount}}" ng-model="payment.Amount" />
</div>

<div class="col-md-8 input-group">
    <label class="control-label col-md-4">Payment Method</label>
    <select ng-model="payment.PaymentMethodId" name="paymentMethods" ng-options="paymentMethod.Id as paymentMethod.Name for paymentMethod in paymentMethods">
        <option value="">Select a Payment Method</option>
    </select>
</div>

调用页面

<section id="payments">

            <div class="form-group payment" ng-repeat="payment in pledgeData.Payments">

                <payment paymentMethods="pledgeData.PaymentMethods" />

            </div>

            <button class="btn btn-default" ng-click="addPayment()">Add New Payment</button>

        </section>

Answer 1

调用页面中属性名称指定方式错误，应该是payment-methods。

<payment payment-methods='pledgeData.PaymentMethods'...

Angular 有在 html 中使用破折号和在代码中使用驼峰命名法的约定。

此外，由于您在指令的隔离范围内使用名为属性的键，您还可以将其指定为:

scope: {
     paymentMethods: '='
}

不再赘述。