Сокращение продолжительности угловых переменных отображения

Question

Я использую хлебную крошку Bootstrap в сочетании с угловыми для вывода переменных, как:

<ol class="breadcrumb"> 
    <li ng-repeat="breadcrumb in box.breadcrumbs"><a href="#">{{ breadcrumb.folder }}</a></li> 
</ol> 

Скажем, у меня есть выход:

a/b/c/d/e/f/g

, но это заканчивается, протягивая ширину моей страницы. Есть простой способ (или встроенный), чтобы установить вывод:

a/b/.../f/g

Answer 1

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

что-то вроде этого:

angular.module('myFilters', []).filter('breadcrumbs', function() { 
    return function(breadcrumbsArray) { 
    if (breadcrumbsArray.length > 5) { 
     // return a new array with your desired structure 
     return [].concat(
     breadcrumbsArray.slice(0, 2), // first two elements 
     { 
      // this would be the '...' element, so you have to put the other info you need 
      folder: '...' 
     }, 
     breadcrumbsArray.slice(-2) // last two elements 
    ); 
    } 
    return breadcrumbsArray; 
    }; 
}); 

и использовать его как:

<li ng-repeat="breadcrumb in box.breadcrumbs | breadcrumbs"> 

Я не знаю, что вы собираетесь делать, если пользователь нажмет, что «...», но если вы хотите, чтобы отключить фильтр, который вы могли бы просто передать булевый фильтр весело фикция

редактировать вы можете видеть, что это работает here

Answer 2

Если бы это было просто a/b/c/d/e ..., вы могли бы использовать text-overflow: ellipsis (не забудьте переполнения: скрытый с этим).

В противном случае я разделил бы массив пополам на два div s, с другим div с ... между ними.

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