javascript - angularjs 中的动态填充 orderby 不使用输入的第二个变量

Question

Codepen Link

(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>

一段时间以来，我一直在用头撞 table ，试图弄清楚是什么原因导致这个过滤器不起作用。

本质上，我想要实现的是按照当年给定的百分比过滤条形图。从 html 的所有其他部分可以看出，此方法正在处理新值，以及在更改时为不同的宽度设置动画等，但出于某种原因，当我尝试指定特定年份时，它没有没有将该值识别为实际值(我大约 95% 确定它正在寻找该字符串，而不是该值)。

我是 angularjs 的新手(大约一天)，这是一次非常有趣的体验，但是，这个过滤器一直很难弄清楚。

该示例包含一些虚拟数据。

对于这个问题的冗长，我感到很抱歉，这几天我一直很不愉快。

Answer 1

您需要将 orderBy 更改为:

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

问题是 yearCtrl.theyear 被用作字符串，而你想要的是值。

这是有效的:http://codepen.io/anon/pen/RNqgoO