Пользовательское повторное использование с помощью AngularJs

Question

Пользовательское повторное использование с помощью AngularJs

0

Я бы хотел использовать ng-repeat чтобы показать мои результаты, но шаблон немного специфичен...

Он работает с использованием EJS следующим образом:

<% var i = 0; %>

<% vehicles.forEach(function(vehicle, index){ %>

<% if (i === 0) {%>
<div class="line">
<% } %>

<div class="col-3">
  <article>
    <img src="/uploads/<%-vehicle.thumbnail%>" alt="<%-vehicle.title%>">
    <h3><a href="/mes-vehicules/show/<%-vehicle.id%>"><%-vehicle.title%></a></h3>
    <p><%-shortText(vehicle.description, 50)%></p>
    <span><%-formatNumber(vehicle.priceTtc)%></span>
  </article>
</div>

<% if(i === 3) { %>
</div>
<div class="space-10"></div>
<% i = -1; %>
<% } %>

<% i++; %>

<% }); %>

Используя AngularJS, я хотел бы знать, как это сделать, мой код не работает...

<div class="line" ng-if="$index%3 == 0">
  <div class="col-3">
    <article>
      <img src="/uploads/{{vehicle.thumbnail}}" alt="{{vehicle.title}}">
      <h3><a href="/mes-vehicules/show/{{vehicle.id}}">{{vehicle.title}}</a></h3>
      <p>{{vehicle.description | short}}</p>
      <span>{{vehicle.priceTtc | formatNumber}}</span>
    </article>
  </div>
</div ng-if="$index%3 == 0">

tonymx227 22 июль 2016, в 12:13

Источник

0

Вы пробовали что-нибудь до сих пор?
Aron 22 июль 2016, в 10:24
1

Я думаю, вы захотите что-то вроде этого: ng-class="{ line: $index%3 = 0 }" вместо ng-if
devqon 22 июль 2016, в 10:35
1

Одним из вариантов является разделение массива транспортных средств в вашем контроллере.
Rian O'Dwyer 22 июль 2016, в 10:37
0

Это было решение. Я разделил массив, и он работает ... Но мой фильтр не работает при первом ng-repeat ...
tonymx227 22 июль 2016, в 12:43
0

@tonymx227 tonymx227, вам не нужно использовать ng-if чтобы закрыть свой div , он уже находится сверху ... также опубликуйте свой фильтр ..
developer033 23 июль 2016, в 04:20

Показать ещё 3 комментария

Теги:

angularjs

1 ответ

Ещё вопросы

Вы пробовали что-нибудь до сих пор?
Я думаю, вы захотите что-то вроде этого: ng-class="{ line: $index%3 = 0 }" вместо ng-if
Одним из вариантов является разделение массива транспортных средств в вашем контроллере.
Это было решение. Я разделил массив, и он работает ... Но мой фильтр не работает при первом ng-repeat ...
@tonymx227 tonymx227, вам не нужно использовать ng-if чтобы закрыть свой div , он уже находится сверху ... также опубликуйте свой фильтр ..

Ankit Chaudhary · Answer 1 · 2016-07-22T07-37-00.000Z

Кажется, вам нужно 4 ребенка в одном div, чей класс должен быть "линией", и после каждых четырех предметов вы хотите вставить один div, чей класс "space-10". Это можно сделать, используя ng-if &, проверив, если $ index кратно 4.

Для отображения не более 50 символов нам нужно создать функцию shortText(desc,length) в нашем контроллере, которая вернет нам сокращенный текст.

Для номера форматирования Angular js предоставляет number фильтр.

Код HTML:

  <div ng-repeat="vehicle in vehicles">
   <div class="line" ng-if="$index % 4 == 0">
      <div class="col-3"">
        <article>
          <img src="/uploads/{{vehicle.thumbnail}}" alt="{{vehicle.title}}">
          <h3><a href="/mes-vehicules/show/{{vehicle.id}}">{{vehicle.title}}</a></h3>
          <p>{{shortText(vehicle.description, 50)}}</p>
          <span>{{vehicle.priceTtc | number}}</span>
        </article>
      </div>
    <div class="space-10" ng-if="$index % 4 == 3"></div>
    </div>
</div>

Код контроллера:

$scope.shortText= function(desc,length) {
             if(desc.length>length)
return desc.substr(0,length);
else
return desc;
  }