缩短角度显示变量

Shortening Angular display variables

本文关键字：显示 变量      更新时间：2024-05-04

我使用Bootstrap的breadcrumb和Angular来输出变量，如：

<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

我不认为有内置的方法，但编写一个自定义过滤器很容易，可以随心所欲，并且可以在任何地方重复使用

像这样的东西：

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">

如果用户点击"…"，我不知道你打算怎么做，但是如果你想停用过滤器，你可以把一个布尔值传递给过滤函数

编辑你可以在这里看到它的工作

如果只是a / b / c / d / e ...，您可以使用文本溢出：省略号（不要忘记溢出：用它隐藏）。

否则，我会在两个div上将阵列一分为二，另一个div和...位于两者之间。

或者，我会将数组一分为二，并将每个数组中面包屑的数量限制为最大值。然而，这不会根据屏幕大小进行调整。

相关文章：