настройки стиля сетки Issue результаты

Я хочу показать таблицу в таблице результатов сетки, и я терплю неудачу ...настройки стиля сетки Issue результаты

Я хочу, чтобы выглядеть так:

enter image description here

Я м пытается сделать это таким образом, но он показывает только одну строку:

<div class="resultsTable"> 
      <table style="display: inline-table"> 
       <tr ng-repeat="result in results" class="resultsBox"> 
        <td> 
         <img src="{{result.imageUrl}}" width="200px"> 
         <h4>{{result.name}}</h4> 
        </td> 
       </tr> 



      </table> 
     </div>

CSS:

.resultsBox{ 
    background-color: #ffffff; 
    height: 200px; 
    width: 200px; 
    padding-left: 10px; 
    padding-top: 20px; 
} 

.resultsBox>img{ 
    max-width: 200px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.resultsTable{ 
    max-height: 500px; 
    overflow: scroll; 
    display: inline-table; 
    height: 500px; 

}

источник

2013-12-01 William Falcon

'img' не ребенок' .resultsBox'. И это не код HTML, а серверный код или шаблон, прежде чем компилироваться в HTML-код. Пожалуйста, покажите, что увидит браузер. – FelipeAls

Спасибо. Im новое для веб-разработки. Im, использующий angularjs, html визуализируется с клиентского сервера, что вы видите здесь. Ng-repeat делает копии этой строки таблицы. Проблема здесь в стилизации, я считаю, поскольку я вижу строку результатов, но они укладываются в один столбец, а не в 2. Это весь html, который требуется для отображения n числа элементов. –

Это не HTML-код, который браузер может отображаться без предварительной компиляции с помощью JavaScript. Это шаблон AngularJS, похожий на HTML, но многие циклы и переменные будут расширены (в JS), чтобы создать то, что браузер наконец сделает с реальным 'src' и реальным числом таблиц, строк и ячеек. Посмотрите с помощью Firebug или проверьте, сколько ячеек и строк у вас есть. Уверен, у вас есть 1 ячейка за строку, поэтому 1 столбец, а не 2 столбца, как вам хотелось бы. Этот вид фреймворка (и препроцессоров CSS) не для новичков, если вы не знаете, что происходит ИМХО. – FelipeAls

От шаблона, который вы поделили, нормально, что вы видите только один столбец n строка. Это не ссылка на css, а на разметку, которая будет сгенерирована.

Свойство results - массив одного измерения, что-то вроде [{obj1}, {obj2}, {obj3}], но вы хотите отобразить матрицу как массив двух измерений, т. Е. [[{Obj1}, {obj2} ], [{obj3}, {obj4}]]. К сожалению, в AngularJS не так просто создать матрицу, основанную на одном массиве измерений. Поэтому я рекомендую вам изменить структуру вашего результата в соответствии с его матричным отображением. Затем измените шаблон на что-то вроде:

<div class="resultsTable"> 
    <table style="display: inline-table"> 
     <tr ng-repeat="row in results"> //loop over all row of 2 elements 
     <td ng-repeat="cell in row" class="resultsBox"> //loop over elements 
      <img src="{{cell.imageUrl}}" width="200px"> 
      <h4>{{cell.name}}</h4> 
     </td> 
     </tr> 
    </table> 
    </div>

Смотреть рабочую plunker here

источник

2013-12-01 18:14:04

Спасибо за ответ, но это слишком много. Это просто нужно использовать макет потока, который позволяет элементам в строке перед переходом на следующую строку. Наверное, я должен был просто спросить о раскладке –

настройки стиля сетки Issue результаты

ответ

Смежные вопросы