Question

问题

每当我有一个动态的面包屑，如：

Root > folder1 > folder2 > folder3 > Currentfolder

我应该像面包屑一样，

Root > . . . > Current folder.

问题

当我点击三个点时，我应该得到完整的路径。

我正在尝试在Angularjs中编写此代码。

请有人帮助我。

Answer 1

你可以尝试这个（检查相应的js的小提琴）：

<span ng-repeat="item in breadcrumbs">
    <a ng-show="!($middle &amp;&amp; shortened)">
      <span ng-show="!$first"> > </span>
      {{item}}
      <span ng-show="$first &amp;&amp; shortened"> > </span>
    </a>
    <a ng-show="$middle &amp;&amp; shortened" ng-click="toggleShortened()">.</a>    
</span>

http://jsfiddle.net/HB7LU/21036/

这是最优雅的方法，但我希望它有所帮助。

Answer 2

如果你愿意的话，你可以用纯CSS实现同样的目的。将额外的面包屑放在可以获得焦点的容器内（例如<span class="extra-breadcrumbs" tabindex="0">）。默认样式是隐藏此容器内的所有内容并显示占位符内容。类似的东西：

.extra-breadcrumbs > * {
    display: none;
}

.extra-breadcrumbs:after {
    content: '. . .'
}

然后，当容器获得焦点（通过点击）时，您可以显示隐藏的项目并隐藏占位符：

.extra-breadcrumbs:focus > * {
    display: initial;
}

.extra-breadcrumbs:focus:after {
    display: none;
}

如果在angularjs中它太长，如何获得面包屑的三个点？

2 个答案: