用{{index+1}} angularjs改变参数
用{{index+1}} angularjs改变参数
提问于 2016-01-25 16:09:52
我试着用ng-repeat 显示高级图表，这里是html:
<tr data-ng-repeat="key in keys">
<td>
<div style="width: 140px; height: 37px; margin: 0 auto" class="hc-pie" items="values{{index+1}}"></div>
</td>
<td>{{key.perfomance}}</td>
<td>{{key.current}}</td>
<td>{{key.previous}}</td>
<td>{{key.variance}}</td>
</tr>和my values控制器：
$scope.values1=[
['value', 42.4],
['value', 33.2],
['value', 34.5],
['value', 39.7],
['value', 52.6],
['value', 75.5],
['value', 57.4],
['value', 60.4],
['value', 47.6],
['value', 39.1],
['value', 46.8],
['value', 51.1]
];
$scope.values2=[
['value', 32.4],
['value', 13.2],
['value', 84.5],
['value', 19.7],
['value', 22.6],
['value', 65.5],
['value', 77.4],
['value', 90.4],
['value', 17.6],
['value', 59.1],
['value', 76.8],
['value', 21.1]
];和其他数据：
$scope.keys=[
{perfomance:'ccc',
current:'a',
previous:'b',
variance:'c',
plus:false,
},{perfomance:'bbb',
current:'a',
previous:'b',
variance:'c',
plus:true,
},{perfomance:'aaa',
current:'a',
previous:'b',
variance:'c',
plus:false,
}
];也是我的指令：
.directive('hcPie', function () {
return {
restrict: 'C',
replace: true,
scope: {
items: '='
},
controller: function ($scope, $element, $attrs) {
console.log(2);
},
template: '<div id="container" style="margin: 0 auto">not working</div>',
link: function (scope, element, attrs) {
var chart = new Highcharts.Chart({
chart: {
renderTo: element[0],
type: 'column',
backgroundColor: null
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
labels: {
enabled: false
},
gridLineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
tickLength: 0
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
min: 0,
title: {
text: null
},
labels: {
enabled: false
}
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
states: {
hover: {
color: '#FFFFFF'
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Value',
color: '#EC5B00',
data: scope.items
}]
});
scope.$watch("items", function (newValue) {
chart.series[0].setData(newValue, true);
}, true);
}
}
});我试图用items="values{{index+1}}"更改值，但它在items="values1"的html中显示相同的值以显示另一个高图表，但它不会改变我错过的内容吗？
回答 2
Stack Overflow用户
发布于 2016-01-25 16:38:22
您不应该使用带双向绑定的大括号，因为它使角表达式无效。
在您的示例中，您只需要使用括号表示法来通过动态键引用对象属性(还要注意，它是$index而不是index)：
<div class="hc-pie" items="this['values' + ($index + 1)]" style="width: 140px; height: 37px; margin: 0 auto"></div>Stack Overflow用户
发布于 2016-01-25 16:55:33
重组您的数据：
$scope.values[1]=[
{'value': 42.4},
{'value': 33.2}
]
$scope.values[2]=[
{'value': 32.4},
{'value': 13.2}
]然后在HTML中使用：
<div class="hc-pie" items="values[index+1]"></div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34997093
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号