如何在 Angular ng-Repeat 中动态设置 Zingchart 属性

Question

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

在我的控制器中，变量是如何动态生成的：

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 的地方，我得到了：

<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'——但是当我尝试这样做时，我在我的浏览器中出现以下错误：

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 以尝试对其进行插值，但这没有用。

知道如何实现吗？在此先感谢您的帮助！

====

编辑：我应该提到我也尝试完全删除花括号（例如，zc-json="game.AwayAbbrev"），虽然这解决了错误但没有返回任何数据.

===

编辑 #2：请参阅下面 Tjaart 的回答，因为这解决了我的问题。我会注意到我的代码中还有一个与我原来的问题无关的错误；我需要包含一个 id 作为 Zingchart 属性，我在我的 ng-repeat by index 中增加了它。所以最后一段代码看起来像这样：

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

Answer 1

我的是你只需要在没有双花括号的情况下使用它，就像这样

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

Answer 2

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

$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 更新为以下内容：

<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 属性

How to Dynamically Set Zingchart Attribute within Angular ng-Repeat

javascript

angularjs

zingchart