Как увеличить ширину списка в ионном?

Question

Как увеличить ширину списка в ионном?

0

Я пытаюсь сделать список, как показано на рисунке. Я могу сделать список, используя ng-repeat, но мои дочерние элементы не такие, как показано на изображении, почему? Я использовал вложенный ng-repeat. Не могли бы вы рассказать мне, где я делаю неправильно, чтобы сделать тот же список, что и на рисунке? [! [введите описание изображения здесь] [1]] [1]

вот мой код http://play.ionic.io/app/8a3d7bbaf403

  <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <ion-content>
      <ion-list>
        <ion-item  style="background-color:grey;" ng-repeat="item in collect track by $index">
          <p style="color:white;">{{item.childName }}</p>
          <ion-list>
  <ion-item ng-repeat="i in item.grandChildren">
    {{i.grandChildName}}!
  </ion-item>
</ion-list>
        </ion-item>
       </ion-list>
    </ion-content>

Shruti 08 окт. 2015, в 16:59

Источник

0

@GuruprasadRao Нет, пожалуйста, проверьте изображение .. !! только заголовок имеет серый фон .. а там ребенок есть белый ..
Shruti 08 окт. 2015, в 14:40
0

Это должно быть какой-то проблемой CSS верно?
Guruprasad Rao 08 окт. 2015, в 14:40
0

да, в моем коде есть две проблемы ... первый единственный заголовок - серый фон. и там дочерний элемент имеет ту же ширину, что и родительский ... пожалуйста, проверьте мое изображение
Shruti 08 окт. 2015, в 14:41
0

Вы видите style="background-color:grey;" на ion-item для header ? То же самое, добавьте его для repeat ion-item
Guruprasad Rao 08 окт. 2015, в 14:42
0

На самом деле «Отчет в отчет», «Распоряжение на получение наличных» имеют только серый фон, а дочерний «ресурс рамки» имеет светло-серый фон и такую же ширину, как родительский.
Shruti 08 окт. 2015, в 14:43
0

Что - то вроде этого
Guruprasad Rao 08 окт. 2015, в 14:44
0

Давайте продолжим эту дискуссию в чате .
Shruti 08 окт. 2015, в 14:44
0

Нет, вы не поняли мой вопрос ... Пожалуйста, проверьте мое изображение. В списке есть заголовок, и там дочерние элементы. Оба имеют одинаковую ширину. Разница между заголовком и заголовком имеет цвет фона серый, а у детей светло-серый.
Shruti 08 окт. 2015, в 14:45
0

ты понял мою точку зрения ..? На самом деле в списке отображаются заголовки и их элемент. Заголовок имеет серый цвет фона, а элемент имеет светло-серый цвет фона.
Shruti 08 окт. 2015, в 14:50
0

Откуда вы взяли эту фотографию .. Я имею в виду, у вас была какая-нибудь демоверсия онлайн ..?
Guruprasad Rao 08 окт. 2015, в 15:10
0

нет у меня нет, у меня есть кое-что на ионном сайте ionicframework.com/docs/components/#item-dividers..я пытаюсь реализовать это
Shruti 08 окт. 2015, в 15:14
0

Я получил это Этот тип списка мне нужно реализовать play.ionic.io/app/287a40348400
Shruti 08 окт. 2015, в 15:17
0

не могли бы вы, пожалуйста, добавьте номер, как вы сделали в приведенном выше
Shruti 08 окт. 2015, в 15:18
0

Как вы добавили 24,11,09,08 номер в список, как я добавлю в свой lsit
Shruti 08 окт. 2015, в 15:18
0

вот это drmo
Guruprasad Rao 08 окт. 2015, в 15:29

Показать ещё 13 комментариев

Теги:

javascript

jquery

ionic-framework

angularjs

angularjs-ng-repeat

1 ответ

Ещё вопросы

@GuruprasadRao Нет, пожалуйста, проверьте изображение .. !! только заголовок имеет серый фон .. а там ребенок есть белый ..
Это должно быть какой-то проблемой CSS верно?
да, в моем коде есть две проблемы ... первый единственный заголовок - серый фон. и там дочерний элемент имеет ту же ширину, что и родительский ... пожалуйста, проверьте мое изображение
Вы видите style="background-color:grey;" на ion-item для header ? То же самое, добавьте его для repeat ion-item
На самом деле «Отчет в отчет», «Распоряжение на получение наличных» имеют только серый фон, а дочерний «ресурс рамки» имеет светло-серый фон и такую же ширину, как родительский.
Давайте продолжим эту дискуссию в чате .
Нет, вы не поняли мой вопрос ... Пожалуйста, проверьте мое изображение. В списке есть заголовок, и там дочерние элементы. Оба имеют одинаковую ширину. Разница между заголовком и заголовком имеет цвет фона серый, а у детей светло-серый.
ты понял мою точку зрения ..? На самом деле в списке отображаются заголовки и их элемент. Заголовок имеет серый цвет фона, а элемент имеет светло-серый цвет фона.
Откуда вы взяли эту фотографию .. Я имею в виду, у вас была какая-нибудь демоверсия онлайн ..?
нет у меня нет, у меня есть кое-что на ионном сайте ionicframework.com/docs/components/#item-dividers..я пытаюсь реализовать это
Я получил это Этот тип списка мне нужно реализовать play.ionic.io/app/287a40348400
не могли бы вы, пожалуйста, добавьте номер, как вы сделали в приведенном выше
Как вы добавили 24,11,09,08 номер в список, как я добавлю в свой lsit

JoseM · Accepted Answer · 2015-10-08T12-43-00.000Z

Вам нужно удалить прописку из элементов списка "child", а затем добавить те же дополнения только вокруг "дочернего" заголовка.

Я немного изменил ваш html, чтобы использовать классы, и я завернул заголовок в div

  <ion-header-bar class="bar-stable">
    <h1 class="title">Awesome App</h1>
  </ion-header-bar>
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="item in collect track by $index" class="child-item">
        <div class="child-title">{{item.childName }}</div>
        <ion-list>
          <ion-item ng-repeat="i in item.grandChildren">
            <span class="grandchild-name">{{i.grandChildName}}!</span>
            <span class="grandchild-count">{{i.grandChildCount}}</span>
          </ion-item>
        </ion-list>
      </ion-item>
    </ion-list>
  </ion-content>

Затем в вашем CSS вы можете использовать эти классы

.child-item {
   background-color: grey;
   padding: 0;
}
.child-title {
  text-transform: uppercase;
  color: white;
  padding: 16px;
  margin: -1px;
}
.grandchild-count {
  float: right;
  padding-right: 16px;
  font-weight: bold;
}

Ссылка на образец: http://play.ionic.io/app/2bb6c01bd2cb

Результат теперь выглядит следующим образом:

[! [list output] [1]] [1]