如何動態設置Angular ng中的Zingchart屬性重複

使用AngularJS，我試圖構建一個頁面，該頁面爲數組中的每個對象創建一個不同的動態生成的Zingchart。我的問題是 - 由於數據和變量名稱是在頁面加載時在我的控制器中動態生成的 - 我不確定如何在Zingchart指令中正確引用它們。如何動態設置Angular ng中的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中重複索引。所以代碼的最後一塊是這樣的：

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

來源

2016-09-23 unvrsltravlr

你是否試圖將'game.AwayAbbrev'變量作爲'json'傳遞？ –

我的確如此，因爲這是在此解釋的Zingchart指令所需的格式：https：//www.zingchart.com/docs/developers/angularjs-charts/。值得一提的是，當我將視圖中的變量名顯式更改爲在Controller中動態生成的「AwayAbbrevs」之一時，圖表按預期顯示，因此數據傳遞的格式看起來並不像成爲問題。 – unvrsltravlr

請看我的回答，我想你試圖通過使用'[「PropertyName」]'表示法來訪問這些值。 –

創建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>

來源

2016-09-23 10:30:51

這釘了它。謝謝！真的很感謝幫助。 – unvrsltravlr

我是你只需要而不是直接在$scope使用它沒有雙大括號，這樣

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

來源

2016-09-23 08:53:40

謝謝 - 我應該提到我也嘗試過這種方式，雖然它擺脫了由花括號引起的瀏覽器錯誤，但它在我的視圖中沒有返回任何/空白數據。 – unvrsltravlr

如何動態設置Angular ng中的Zingchart屬性重複

回答

相關問題