angularjs，如果容器宽度小于ul元素

angularjs if container width less than ul element

本文关键字：小于 ul 元素 如果 angularjs      更新时间：2023-09-26

我有动态面包屑数据。我正在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元素隐藏类。

例如：

[{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>

我做了一个没有棱角的，但我想试试有棱角的。这怎么可能是有角度的？

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

<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

相关文章：