在 angularjs 中动态填充的 orderby,不使用输入的第二个变量
Dynamically filled orderby in angularjs not using the 2nd variable that is inputted
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>
一段时间以来,我一直在用头撞桌子,试图找出导致此过滤器不起作用的原因。
从本质上讲,我试图实现的是按当年给出的百分比过滤条形。正如在 html 的所有其他部分中可以看出的那样,此方法正在努力执行新值,以及在更改时对不同的宽度进行动画处理等,但是由于某种原因,当我尝试指定特定年份时,它不会将值识别为实际值(我大约 95% 确定它正在寻找该字符串, 而不是值)。
我对angularjs相当陌生(大约一天),这是一次非常有趣的经历,但是,这个过滤器一直很痛苦。
该示例包含一些虚拟数据。
很抱歉这个问题啰嗦,我这几天过得很艰难。
您需要更改您的订单:
<div class="bars" ng-repeat="bar in barCtrl.bars | orderBy:'-year[' + yearCtrl.theyear + '].percentage'">
问题是yearCtrl.theyear被用作字符串,而你想要的值。
这是它的工作:http://codepen.io/anon/pen/RNqgoO
相关文章:
- 访问javascript文件输入变量的值
- 使用输入变量设置元素的值
- 使用javascript在post请求中传递用户输入变量
- 我将如何在将数据发布到 php 脚本的 javascript 脚本中输入变量
- 如何更新createControls's函数在javascript中输入变量
- Escape”"字符,以便在jQuery中输入变量
- 根据数组检查输入变量
- jQuery 函数不会使用输入变量
- 无法使用输入变量设置起点和目的地
- PHP echo html 输入变量在 heredoc 之外
- JavaScript 调整函数输入变量
- HTML5 localStorage加载用户输入变量
- 如何从HTML表单传递输入变量
- 如何使用XML输入变量以根据XSD进行验证
- 简化我的isNaN函数中的两个输入变量JavaScript
- jQuery自动完成隐藏输入变量的值的源代码
- 如何把一个asp变量变成一个html输入变量
- 在angular中,我如何将输入变量检索到javascript控制器上?
- Javascript FOR循环,表单输入变量
- 我如何输入变量来改变标签文本使用javascript