(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 的新手(大约一天)，这是一次非常有趣的体验，但是，这个过滤器一直很难弄清楚。
该示例包含一些虚拟数据。
对于这个问题的冗长，我感到很抱歉，这几天我一直很不愉快。
最佳答案
您需要将 orderBy 更改为:
<div class="bars" ng-repeat="bar in barCtrl.bars | orderBy:'-year[' + yearCtrl.theyear + '].percentage'">
问题是 yearCtrl.theyear 被用作字符串，而你想要的是值。
关于javascript - angularjs 中的动态填充 orderby 不使用输入的第二个变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29079815/