CODEWITHSUNDEEP
javascripthtmlangularjs
aw-bubakik
aw-bubakik

Reputation: 331

angularjs if container width less than ul element

I have dynamic bread crumbs data. which I'm binding in DOM with ng-repeat:

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

I want to calculate in every repeat ul width and compare with container's width. If container width is less than ul width, I want to add all previous li elements hide class.

for example:

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

Assume, that I have this data and after second object, there is not space in container. Application must generate such 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>

I've made it without angular, but I want to try it with angular. How it will be possible in angular way?

Upvotes: 1

Views: 291

Answers (1)

georgeawg
georgeawg

Reputation: 48968

One approach is to create a custom filter which reduces your breadcrumb list based on the desired width.

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

Custom filter

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;
  }
});

The JSFiddle

Upvotes: 1

Related Questions