Question

我有动态面包屑数据。我在DOM中使用ng-repeat进行绑定：

<ul>
    <li class="list-item" ng-repeat="breadCrumb in breadCrumbs">
        <a  href="javascript:void(0);">{{ breadCrumb.name }}</a>
    </li>
</ul>

我想在每个重复的ul宽度中计算并与容器的宽度进行比较。如果容器宽度小于ul宽度，我想添加所有以前的li元素hide class。

例如：

[{name:'home'},{name:'movies'},{name:'Comedy'},{name:'The hangover'}]

假设我有这个数据，在第二个对象之后，容器中没有空格。应用程序必须生成这样的html：

<ul>
    <li class="list-item HIDE" ng-repeat="breadCrumb in breadCrumbs">
        <a  href="javascript:void(0);">home</a>
    </li>
    <li class="list-item HIDE" ng-repeat="breadCrumb in breadCrumbs">
        <a  href="javascript:void(0);">movies</a>
    </li>
    <li class="list-item" ng-repeat="breadCrumb in breadCrumbs">
        <a  href="javascript:void(0);">Comedy</a>
    </li>
    <li class="list-item" ng-repeat="breadCrumb in breadCrumbs">
        <a  href="javascript:void(0);">The hangover</a>
    </li>
</ul>

我没有棱角分明，但是我想用棱角分明。如何以角度方式实现？

Answer 1

一种方法是创建一个自定义过滤器，根据所需的宽度减少面包屑列表。

<span 
  ng-repeat="breadCrumb in breadCrumbs | crumbFilter: iWidth ">
  &#8594;
  <a  href="javascript:void(0);">{{ breadCrumb.name }}</a>
</span>

自定义过滤器

angular.module('myApp').filter('crumbFilter', function() {
  return function(list,width) {
    var testString = "";
    var filteredList = [];
    var i = list.length-1;
    while (i>=0 && testString.length<width) {
      testString += "  "+list[i].name;
      filteredList.unshift(list[i]);
      i--;
    }
    return filteredList;
  }
});

JSFiddle

如果容器宽度小于ul元素

1 个答案: