Dynamically filled orderby in angularjs not using the 2nd variable that is inputted

Question

(function(){
  var app = angular.module('bars',[]);
  
  app.controller('BarController',function(){
    this.bars = bars;
  });
  
  app.controller('YearController',function(){
    this.theyear = 0;
    
    this.years = years;
    
    this.setYear = function(year){
      this.theyear = parseInt(year);
    };
    
    this.isSelected = function(year){
      return this.theyear === year;
    };
  });
  
  var years = [
    {
      name: '2007',
      id: 0,
      headliner: 'Something has happened'
    },
    {
      name: '2008',
      id: 1,
      headliner: 'Something else has happened'
    }
  ];
  
  var bars = [
    {
      name: 'Wilfred Jameson',
      color: '#e23069',
      picture: 'http://www.afcb.co.uk/images/common/bg_player_profile_default_big.png',
      year: [
        {
          name:2007,
          percentage: 100,
          description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, maiores!'
        },
        {
          name:2008,
          percentage: 44,
          description: 'Test'
        }
      ]
    },
    {
      name: 'Georgina Lange',
      color: '#0088cc',
      picture: 'http://eshmyo.karatekin.edu.tr/dosyalar/image/default_profile_female.png',
      year: [
        {
          name:2007,
          percentage: 72,
          description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate iure sunt minima ea, eius?'
        },
        {
          name:2008,
          percentage: 62,
          description: 'Test2'
        }
      ]
    },
    {
      name: 'Timothy Gerbil',
      color: '#fe3021',
      picture: 'http://twiki.org/p/pub/Main/UserProfileHeader/default-user-profile.jpg',
      year: [
        {
          name:2007,
          percentage: 83,
          description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate iure sunt minima ea, eius?'
        }
      ]
    },
    {
      name: 'Lizz Abbadon',
      color: '#6C0CE8',
      picture: 'http://www.salsapartner.eu/images/anonymous_woman.jpg',
      year: [
        {
          name:2007,
          percentage: 36,
          description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate iure sunt minima ea, eius?'
        },
        {
          name:2008,
          percentage: 40,
          description: 'Test2'
        }
      ]
    }
  ];
})();

body {margin:0;}

*,*:before,*:after {
  transition:all 0.3s;
  -webkit-transition:all 0.3s;
  box-sizing:border-box;
}

.years {
  position:relative;
  float:left;
  list-style:none;
  width:100%;
  margin:0;
  padding:0;
}
.years > li {
  position:relative;
  float:left;
  margin:0 0 0 15px;
  border:1px solid #999;
  background-color:#dbdbdb;
  border-bottom:none;
  border-radius:0.5em 0.5em 0 0;
  overflow:hidden;
}
.years > li > a {
  position:relative;
  float:left;
  padding:7px 15px 2px 15px;
  color:#fff;
  text-decoration:none;
}
.years > li.active > a {
  color:#555;
  background-color:#fff;
}
.years > li > a:hover {
  background-color:#ebebeb;
  color:#fff;
}

.bars {
  position:relative;
  float:left;
  width:100%;
}

.bars .bar {
  position:relative;
  float:left;
  width:calc(100% - 20px);
  margin:10px;
  height:40px;
  margin-bottom:10px;
  border-radius:2em;
  overflow:hidden;
}
.bars .bar .mask {
  position:relative;
  float:left;
  height:100%;
  border-radius:2em;
  line-height:40px;
  padding-left:20px;
  color:#eee;
  letter-spacing:1px;
}
.bars .bar .picture {
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  height:100%;
  width:40px;
  border-radius:100%;
  overflow:hidden;
  cursor:pointer;
}
.bars .bar .picture img {
  width:100%;
}
.bars .card {
  position:relative;
  float:left;
  margin-top:10px;
  margin-left:-100%;
  width:calc(100% - 20px);
  opacity:0;
  height:0;
  transform:scaleY(0);
  -webkit-transform:scaleY(0);
  padding:0px;
  color:#eee;
  overflow:hidden;
}
.bars .card.cardin {
  padding:20px;
  margin-left:10px;
  opacity:1;
  height:auto;
  transform:scaleY(1);
  -webkit-transform:scaleY(1);
  overflow:visible;
  margin-bottom:10px;
}
.bars .card .triangle {
  position:absolute;
  z-index:-1;
  bottom:100%;
  margin-left:-40px;
  border:0px solid transparent;
  height:0;
  width:0;
}
.bars .card .triangle.cardin {
  border-width:20px;
}
.bars .card h2 {
  margin:0 0 10px 0;
}
.bars .card p {
  letter-spacing:1px;
  line-height:20px;
}

<script src="https://code.angularjs.org/1.3.2/angular.js"></script>
<html ng-app="bars">
  <body ng-controller="BarController as barCtrl">
    <h1 style="text-align:center;position:relative;float:left;width:100%;">Progress</h1>
    <div class="wrap" ng-controller="YearController as yearCtrl">
      <ul class="years">
        <li ng-repeat="year in yearCtrl.years" ng-class="{ active: yearCtrl.isSelected(year.id)}">
          <a href="#" ng-click="yearCtrl.setYear(year.id)">
            {{year.name}}
          </a>
        </li>
      </ul>
      <h3 class="headliner" ng-repeat="year in yearCtrl.years" ng-show="yearCtrl.isSelected(year.id)" style="position:relative;float:left;width:100%;text-align:center;">
        {{year.headliner}}
      </h3>
      <div class="bars" ng-repeat="bar in barCtrl.bars | orderBy:'-year[yearCtrl.theyear].percentage'">
        <div class="bar" ng-show="bar.year[yearCtrl.theyear].percentage && bar.color">
          <div class="mask" ng-style="{'background-color':'{{bar.color}}','width':bar.year[yearCtrl.theyear].percentage+'%'}">
            {{bar.name}}
            <div class="picture" ng-class="cardclass" ng-show="bar.picture" ng-click="cardclass ? cardclass = '' : cardclass = 'cardin'">
              <img ng-src="{{bar.picture}}"/>
            </div>
          </div>
        </div>
        <div class="card" ng-class="cardclass" ng-show="bar.year[yearCtrl.theyear].percentage && bar.color" ng-style="{'background-color':'{{bar.color}}'}">
          <div class="triangle" ng-class="cardclass" ng-style="{'left':bar.year[yearCtrl.theyear].percentage+'%','border-bottom-color':'{{bar.color}}'}"></div>
          <h2>{{bar.name}}</h2>
          <img ng-src="{{bar.picture}}" />
          <p style="font-weight:bold;">
            {{bar.year[yearCtrl.theyear].name}}
          </p>
          <p>
            {{bar.year[yearCtrl.theyear].description}}
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

I have been bashing my head against the table for a while trying to figure out what is causing this filter not to work.

In essence, what I am trying to achieve is to filter the bars by the percentages given in that year. As can be seen in all the other parts of the html, this method is working to do the new values, as well as animating the different widths on change etc, but for some reason, when I try to designate the specific year, it doesn't recognise the value as the actual value (I'm about 95% sure it's looking for the string of that, instead of the value).

I am fairly new to angularjs (about a day) and it has been quite an interesting experience, however, this filter has been a pain to figure out.

The example has some dummy data included.

Sorry for the longwindedness of this question, I've been having a rough couple of days.

I'll keep trying to find a solution, but from just glancing at it, it seems that the year is not being set in time. The ng-repeat is firing before your controller has a chance to set the year. If you set the orderBy to 0 instead of yearCtrl.theyear, it orders it perfectly. I can hack it real quickly, but I'd like to come up with a best practices method, rather than just hacking it. — Chad
– Chad, Commented Mar 16, 2015 at 15:41
@Chad That was something I had forgotten to mention, using the actual number that it's meant to be works fine, but I want to dynamically set the number (there will be more years added on later). If I print it out just before the ng-repeat I get the value printing correctly (and it changes on the tab click) which confuses me even more. Later on in the code I also had to use bar.year[yearCtrl.theyear].percentage+'%' for the width which leads me to believe it's a similar-ish solution but I can't seem to get it to work properly :/ — Zephyr
– Zephyr, Commented Mar 16, 2015 at 15:47

Mathew Berg · Accepted Answer · 2015-03-16 16:17:48Z

2

You need to change your orderBy to this:

<div class="bars" ng-repeat="bar in barCtrl.bars | orderBy:'-year[' + yearCtrl.theyear + '].percentage'">

The problem is yearCtrl.theyear was being used as a string, while instead you want the value.

Here's it working: http://codepen.io/anon/pen/RNqgoO

answered Mar 16, 2015 at 16:17

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zephyr Over a year ago

Thank you! I thought it was something like this but I couldn't think of the correct syntax

Collectives™ on Stack Overflow

Dynamically filled orderby in angularjs not using the 2nd variable that is inputted

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related