Nativescript с использованием многократного значения ключа повторителя

Я пытаюсь использовать повторитель для отображения данных json. Но результат не такой, как я хочу. Я хочу, чтобы элемент отображался после значения. не Значение отображало все после этого Элемент отображало все.

вот page.bindingContext :

page.bindingContext = {
"myItems": [
    {
        "value": "100",
        "item": "Car"
    },
    {
        "value": "200",
        "item": "Motor"
    },
    {
        "value": "300",
        "item": "Boat"
    }
]
};

и вот шаблон xml:

<ScrollView>
  <StackLayout cssClass="bodyPilihProduk">

  <Repeater items="{{ myItems }}" style="font-size:12;">
     <Repeater.itemTemplate>
        <Label text="{{value}}" margin="10" />
     </Repeater.itemTemplate>
  </Repeater>

  <Repeater items="{{ myItems }}" style="font-size:20;">
     <Repeater.itemTemplate>
        <Label text="{{ item }}" margin="10" />
     </Repeater.itemTemplate>
  </Repeater>

  </StackLayout>
</ScrollView>

и результат: введите здесь описание изображения


ios nativescript android javascript repeater
person Dilar    schedule 04.11.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Как насчет использования Repeater один раз и печати двух элементов?

Отредактировано: добавлена ​​ориентация = "горизонтальная"

<ScrollView>
  <StackLayout cssClass="bodyPilihProduk">

  <Repeater items="{{ myItems }}" >
     <Repeater.itemTemplate orientation="horizontal">
        <Label text="{{ item }}" margin="10" style="font-size:20;"/>
        <Label text="{{value}}" margin="10" style="font-size:12;"/>
     </Repeater.itemTemplate>
  </Repeater>

  </StackLayout>
</ScrollView>



Теперь вы можете отображать как элементы, так и значения.

iOS

введите здесь описание изображения

Android введите здесь описание изображения

person Stanley Ko    schedule 04.11.2015
comment
результат показывает только элементы {{value}}. {{item}} не отображается. - person Dilar; 04.11.2015
comment
странный. по-прежнему отображать только элементы {{value}} в эмуляторе Android. - person Dilar; 04.11.2015
comment
Я пытаюсь использовать ListView, и он работает ` ‹ListView items={{ myItems }} › ‹ListView.itemTemplate› ‹StackLayout verticalAlignment=center› ‹Label text={{ item }} textWrap=true style=font-size:30 ;margin-bottom:20;/› ‹Label text={{ value }} textWrap=true style=font-size:30;margin-bottom:20;/› ‹/StackLayout› ‹/ListView.itemTemplate› ‹/ListView ›` - person Dilar; 04.11.2015
comment
@Дилар Рад это слышать. И, насколько мне известно, этот код должен работать. - person Stanley Ko; 04.11.2015
comment
Вы также можете попробовать разместить метки в StackLayout. - person Neli Chakarova; 04.11.2015

arrow_upward
0
arrow_downward

Используйте один (1) повторитель и напечатайте на нем обе этикетки. Поскольку у вас есть два элемента, вам нужно обернуть их в какой-то макет. Чтобы просто печатать их друг за другом, StackLayout с orientation="horizontal" будет достаточно.

<ScrollView>
    <Repeater items="{{ myItems }}">
        <Repeater.itemTemplate>
            <StackLayout orientation="horizontal">
                <Label text="{{ item }}" />
                <Label text="{{ value }}" />
            </StackLayout>
        </Repeater.itemTemplate>
    </Repeater>
</ScrollView>

Подойдет любой макет, вот пример с использованием GridLayout, который даст вам больше похожего на таблицу с двумя столбцами, элементами в первом столбце и значениями во втором.

<ScrollView>
    <Repeater items="{{ myItems }}">
        <Repeater.itemTemplate>
            <GridLayout columns="4*, 1*">
                <Label col="0" text="{{ item }}" />
                <Label col="1" text="{{ value }}" />
            </GridLayout>
        </Repeater.itemTemplate>
    </Repeater>
</ScrollView>
person Emil Oberg    schedule 04.11.2015