如何在Angular ng-Repeat中动态设置Zingchart属性 [英] How to Dynamically Set Zingchart Attribute within Angular ng-Repeat

问题描述

我正在尝试使用AngularJS构建一个页面，该页面为数组中的每个对象提供一个不同的动态生成的Zingchart.我的问题是-由于数据和变量名是在页面加载时在控制器中动态生成的，因此-我不确定如何在Zingchart指令中正确引用它们.

Using AngularJS, I'm trying to build a page which features a different dynamically generated Zingchart for each object in an array. My problem is that -- as the data and variable names are dynamically generated in my controller on page load -- I'm not sure how to properly reference them within the Zingchart directives.

在我的控制器中，这是动态生成变量的方式:

In my controller, here is how the variables are dynamically generated:

function getWeeklyNflLines(){
  oddsService.getWeeklyNflLines($stateParams.weekNumb).then(function(games){
    vm.nflLines = games;
    for (i=0; i<vm.nflLines.length; i++){
      $scope[vm.nflLines[i].AwayAbbrev] = { [Zingchart json configuration goes here] }
    }
  }
}

然后，在我尝试生产Zingchart的视图中，我得到了:

Then, in my view where I try and produce the Zingchart, I've got:

<div ng-repeat="game in vm.nflLines>
  <div zingchart zc-json="{{game.AwayAbbrev}}" zc-width="100%" zc-height="350px"></div>
</div>

所以回顾一下:我在控制器中设置了'AwayAbbrev'$ scope变量-应该与我的ng-repeat中的'game.AwayAbbrev'相对应-但是当我尝试执行此操作时，出现以下错误在我的浏览器中:

So to review: I set the 'AwayAbbrev' $scope variable in the controller -- which should correspond to 'game.AwayAbbrev' within my ng-repeat -- but when I try to do this, I get the following error in my browser:

angular.js:13550 Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{game.AwayAbbrev}}] starting at [{game.AwayAbbrev}}].

我尝试将zc-json属性更改为ng-attr-zc-json来尝试对其进行插值，但这没有用.

I tried changing the zc-json attribute to ng-attr-zc-json to try and interpolate it, but that didn't work.

有什么想法可以实现吗?预先感谢您的帮助！

Any idea how I might accomplish this? Thanks in advance for any help!

====

我应该提到我也尝试过完全删除花括号(例如zc-json ="game.AwayAbbrev")，尽管这样做可以解决错误，但它不返回任何数据.

I should have mentioned that I also tried removing the curly braces altogether (e.g, zc-json="game.AwayAbbrev"), and though this took care of the error it returned no data.

===

编辑#2:请参阅下面的Tjaart回答，因为这解决了我的问题.我会注意到代码中还有一个错误与我原来的问题无关；我需要包含一个ID作为Zingchart属性，该属性在ng-repeat中按索引递增.所以最后的代码看起来像这样:

EDIT #2: Please see Tjaart's answer below as this solved my problem. I will note there was one additional error in my code unrelated to my original question; I needed to include an id as a Zingchart attribute, which I incremented within my ng-repeat by index. So the final piece of code looked like this:

<div zingchart id="pick-chart[{{$index}}]" zc-json="nflLines[game.AwayAbbrev]" zc-width="100%" zc-height="350px"></div>

推荐答案

与其直接在$scope上创建json对象，还可以尝试将它们添加到单独的属性中:

Instead of creating the json objects directly on $scope you can try do add them on a separate property:

$scope.nfLines = {};

function getWeeklyNflLines(){
  oddsService.getWeeklyNflLines($stateParams.weekNumb).then(function(games){
    vm.nflLines = games;
    for (i=0; i<vm.nflLines.length; i++){
      $scope.nfLines[vm.nflLines[i].AwayAbbrev] = { [Zingchart json configuration goes here] }
    }
  }
}

然后，您可以将HTML更新为以下内容:

Then you can update your HTML to the following:

<div ng-repeat="game in vm.nflLines>
  <div zingchart zc-json="nfLines[game.AwayAbbrev]" zc-width="100%" zc-height="350px"></div>
</div>

这篇关于如何在Angular ng-Repeat中动态设置Zingchart属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！