Кнопка Paypal представляет сразу несколько элементов с AngularJS

Question

У меня есть приложение angularJS с обычным cart, я пытаюсь использовать paypal, чтобы пользователь мог проверить все их cart за один раз.

HTML

<main ng-controller="CheckoutCtrl" class="prototype-paypal"> 
    <h2 class="checkout-header">Checkout</h2> 

    <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
    <input type="hidden" name="cmd" value="_cart"> 
    <input type="hidden" name="upload" value="1"> 
    <input type="hidden" name="business" value="youremail@mail.com"> 
    <input type="hidden" name="currency_code" value="CAD"> 

    <div ng-repeat="item in custCart"> 
     <input type="hidden" name="item_name_{{$index}}" value="{{item.name}}" > 
     <input ng-repeat="size in item.sizes track by $index" type="hidden" name="amount_{{$index}}" 
       value="{{size.price}}"> 
    </div> 

    <input type="image" src="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" name="submit" 
      alt="Make payments with PayPal - it's fast, free and secure!"> 
    </form> 

</main> 

Я думаю, что я использую $index неправильно, вот мои данные:

$scope.custCart = [];  

$scope.templateItems = [ 
{ 
    name: 'First Item', 
    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.', 
    src: 'http://placehold.it/150x150.gif', 
    type: 'Template', 
    sizes: [ 
    { 
     size: "Small", 
     price: 3.99, 
     text: "size of item sm more details more", 
     numOrders: 0, 
    }, 
    { 
     size: "Medium", 
     price: 5.99, 
     text: "size of item md more details more", 
     numOrders: 0, 
    }, 
    { 
     size: "Large", 
     price: 7.99, 
     text: "size of item lg more details more", 
     numOrders: 0, 
    }, 
    { 
     size: "X-Large", 
     price: 8.99, 
     text: "size of item xl", 
     numOrders: 0, 
    }, 
    { 
     size: "XX-Large", 
     price: 10.99, 
     text: "size of item xxl", 
     numOrders: 0, 
    } 
    ] 
}, 
{ 
    name: 'Second Item', 
    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.', 
    src: 'http://placehold.it/150x150.gif', 
    type: 'Template', 
    sizes: [ 
    { 
     size: "Small", 
     price: 3.99, 
     text: "size of item sm ", 
     numOrders: 0, 
    }, 
    { 
     size: "Medium", 
     price: 5.99, 
     text: "size of item md more details more", 
     numOrders: 0, 
    }, 
    { 
     size: "Large", 
     price: 7.99, 
     text: "size of item lg more details more", 
     numOrders: 0, 
    } 
    ], 
}, 
{ 
    name: 'Third Item', 
    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.', 
    src: 'http://placehold.it/150x150.gif', 
    type: 'Template', 
    sizes: [ 
    { 
     size: "Small", 
     price: 3.99, 
     text: "size of item sm ", 
     numOrders: 0, 
    }, 
    { 
     size: "Medium", 
     price: 5.99, 
     text: "size of item md more details more", 
     numOrders: 0, 
    }, 
    { 
     size: "Large", 
     price: 7.99, 
     text: "size of item lg more details more", 
     numOrders: 0, 
    } 
    ], 
}, 
{ 
    name: 'Fourth Item', 
    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.', 
    src: 'http://placehold.it/150x150.gif', 
    type: 'Template', 
    sizes: [ 
    { 
     size: "Small", 
     price: 3.99, 
     text: "size of item sm ", 
     numOrders: 0, 
    }, 
    { 
     size: "Medium", 
     price: 5.99, 
     text: "size of item md more details more", 
     numOrders: 0, 
    }, 
    { 
     size: "Large", 
     price: 7.99, 
     text: "size of item lg more details more", 
     numOrders: 0, 
    } 
    ], 
} 
]; 

Проблема заключается в том, что мои ng-repeat петли для какой-то причине не отображается первый элемент в custCart

Answer 1

Проблема не в нг-повтора. Это правильно на основе вашей структуры данных. Я бы изменил подход к тому, как вы добавляете данные в свою корзину. В настоящее время вы подталкиваете все размеры «item» к тележке, независимо от того, выбирает ли пользователь этот размер элемента или нет, и вы просто используете ng-класс, чтобы скрыть размеры, количество которых равно 0. Это не делает Для меня это очень важно.

Таким образом, вы можете использовать фильтр на вашем экране, чтобы отфильтровать элементы с количеством 0. Разница между тем, что вы делаете сейчас, которое просто использует CSS, чтобы скрыть эти значения, и с использованием фильтра - это то, что фильтр фактически не генерирует никаких элементов DOM для любого из значений, которые не соответствуют фильтру.

Так что вы могли бы сделать что-то вроде этого в контроллере:

$scope.greaterThan = function(prop, val){ 
    return function(item){ 
     return item[prop] > val; 
    } 
} 

Затем в повторе:

ng-repeat="size in item.sizes | filter: greaterThan('numOrders', 0) track by $index" 

В качестве альтернативы, вы можете использовать ngIf, который также не оказывают элементы DOM, такие as:

<input ng-repeat="size in item.sizes track by $index" ng-if="size.numOrders <= 0" type="hidden" name="amount_{{$index}}" value="{{size.price}}"> 

Тем не менее, я настоятельно рекомендую вам взглянуть на то, как вы можете оптимизировать свои тележки. Существует очень хорошая книга под названием Pro AngularJS. Я, кажется, помню, что основной пример, используемый книгой, идет шаг за шагом, создавая интернет-магазин. Вы можете получить его только для примера кода. Это определенно поможет вам оптимизировать то, что у вас есть, настроить службу для тележки и использовать пользовательские директивы, например, для выпадающего меню.

Answer 2

Ваш HTML

<input type="image" src="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" name="submit" 
      alt="Make payments with PayPal - it's fast, free and secure!"> 

Заменить его с:

<input type="submit" style="background:url(http://www.paypal.com/en_US/i/btn/x-click-but01.gif); width:100px; height:100px;" name="Submit" 
      alt="Make payments with PayPal - it's fast, free and secure!">