ng-repeat inside a template Angularjs

Question

I have a payment directive as below. A payment can have one of a number of different payment methods. There is a select list in side the template which should be from a list of payment methods that are passed in.

But at the moment the select list is not being populated with anything.

I'm pretty new to angular.

Payment Directive

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

    }
 };
});

Payment Template

<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>

Calling Page

<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>

it would be nice if you can put the code in plnkr or fiddle

guru
– guru

2014-06-05 13:41:14 +00:00
Commented Jun 5, 2014 at 13:41 — guru
– guru, Commented Jun 5, 2014 at 13:41

link · Accepted Answer · 2014-06-05 13:49:07Z

2

The attribute name is specified in the wrong way in the calling page, it should be payment-methods.

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

Angular has this convention of using dashes in html and camelCase in the code.

Moreover, since you are using a key named as the attribute in the isolated scope of the directive, you can also specify it as:

scope: {
     paymentMethods: '='
}

without repeating it.

answered Jun 5, 2014 at 13:49

link

1,6861 gold badge13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brandon Horst · Accepted Answer · 2014-06-05 13:49:47Z

0

In your Directive, you define the scope as containing a single property called paymentMethods. Yet in your template, you just refer to payment. Note that the inner scope of a directive cannot access the outer scope that it is used in when you define the scope attribute on the directive definition.

answered Jun 5, 2014 at 13:49

Brandon Horst

2,0701 gold badge18 silver badges28 bronze badges

1 Comment

MrBliz Over a year ago

How could i improve this?

Collectives™ on Stack Overflow

ng-repeat inside a template Angularjs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related