將角度表達式傳遞到Javascript

下面我有一個Angular表達式{{USA_Visits.maximum.value |number:0 }}，我希望在JavaScript中使用它來生成圖表。這是我當前的代碼：將角度表達式傳遞到Javascript

<!-- Angular expression --> 

{{USA_Visits.maximum.value |number:0 }} 


<!-- Chart code --> 
<script> 
var chart = AmCharts.makeChart("chartdiv", { 
    "theme": "light", 
    "type": "serial", 
    "startDuration": 2, 
    "dataProvider": [{ 
     "country": "USA", 
     "visits": {{USA_Visits.maximum.value |number:0 }}, 
     "color": "#FF0F00" 
    }, { 
     "country": "Taiwan", 
     "visits": 500, 
     "color": "#333333" 
    }], 
    "valueAxes": [{ 
     "position": "left", 
     "axisAlpha":0, 
     "gridAlpha":0 
    }], 
    "graphs": [{ 
     "balloonText": "[[category]]: <b>[[value]]</b>", 
     "colorField": "color", 
     "fillAlphas": 0.85, 
     "lineAlpha": 0.1, 
     "type": "column", 
     "topRadius":1, 
     "valueField": "visits" 
    }], 
    "depth3D": 40, 
    "angle": 30, 
    "chartCursor": { 
     "categoryBalloonEnabled": false, 
     "cursorAlpha": 0, 
     "zoomable": false 
    }, 
    "categoryField": "country", 
    "categoryAxis": { 
     "gridPosition": "start", 
     "axisAlpha":0, 
     "gridAlpha":0 

    }, 
    "export": { 
     "enabled": true 
    } 

}, 0); 
</script> 

<!-- HTML --> 
<div id="chartdiv"></div>

JS代碼內顯然分配"visits": {{USA_Visits.maximum.value |number:0 }}不工作。我怎樣才能做到這一點？

謝謝

來源

2017-09-14 Henry Blue

你能發佈你得到的錯誤嗎？這將有助於確定爲什麼該財產沒有得到你想要的價值。 – henrisycip

[如何在控制器中使用過濾器？]（https://stackoverflow.com/questions/14302267/how-to-use-a-filter-in-a-controller） – Icycool

可能的重複我不認爲這是一個重複的@Icycool ... 這是我試圖做的JSfiddle。在這種情況下，我想將{{quantity * cost}}傳遞給Javascript。 https://jsfiddle.net/7hj7huj3/ –

這個怎麼樣。

<div id="chartdiv"></div> 
<div ng-app="" ng-init="quantity=2000;cost=2"> 
    <p id="usaVal">USA Value: {{ quantity * cost }}</p> // give id as 'usaVal' 
</div>

，並加入到JS部分

var usaVal = document.getElementById('usaVal');

。

UPDATE

使用console.log(usaVal.innerHTML);，將打印像 '美國價值：4000'。

所以你切片usaVal這樣。

var usaVal = document.getElementById('usaVal'); 
var val = usaVal.innerHTML; 
val = parseInt(val.slice(val.indexOf(':')+2, val.length)); 
var chart = AmCharts.makeChart("chartdiv", { 
    "theme": "light", 
    "type": "serial", 
    "startDuration": 2, 
    "dataProvider": [{ 
     "country": "USA", 
     "visits": val, 
    // I want to use {{ quantity * cost }} instead of 4000 
     "color": "#FF0F00" 
    }, 
    .... 
});

來源

2017-09-14 05:03:26

我已經在小提琴上運行你的解決方案：https://jsfiddle.net/mr9dc0qo/2/，因爲你可以看到美國沒有列，所以我認爲它不工作。我是否正確實施了它？ –

@HenryBlue這是因爲usaVal返回該HTML元素的整個文本。您可以使用console.log來檢查打印的值。也許usaVal回報包括'美國價值：'。所以你必須切割該字符串 –

@HenryBlue我更新了這個 –

EDIT2

參考這個最新Fiddle

請運行下面的代碼，以及

angular.module('myApp', []); 
 

 
angular 
 
    .module('myApp') 
 
    .controller('stretch',function($scope){ 
 
    \t 
 
    }); 
 

 
    /**Below code will be out of angular context**/ 
 
    angular.element(document).ready(function() { 
 
     var scope = angular.element(document.getElementById('access')).scope(); 
 
\t \t 
 
     var chart = AmCharts.makeChart("chartdiv", { 
 
      "theme": "light", 
 
      "type": "serial", 
 
      "startDuration": 2, 
 
      "dataProvider": [{ 
 
       "country": "USA", 
 
       "visits": scope.quantity*scope.cost, 
 
      // I want to use {{ quantity * cost }} instead of 4000 
 
       "color": "#FF0F00" 
 
      }, { 
 
       "country": "China", 
 
       "visits": 1882, 
 
       "color": "#FF6600" 
 
      }, { 
 
       "country": "Japan", 
 
       "visits": 1809, 
 
       "color": "#FF9E01" 
 
      }, { 
 
       "country": "Germany", 
 
       "visits": 1322, 
 
       "color": "#FCD202" 
 
      }, { 
 
       "country": "UK", 
 
       "visits": 1122, 
 
       "color": "#F8FF01" 
 
      }, { 
 
       "country": "France", 
 
       "visits": 1114, 
 
       "color": "#B0DE09" 
 
      }, { 
 
       "country": "India", 
 
       "visits": 984, 
 
       "color": "#04D215" 
 
      }, { 
 
       "country": "Spain", 
 
       "visits": 711, 
 
       "color": "#0D8ECF" 
 
      }, { 
 
       "country": "Netherlands", 
 
       "visits": 665, 
 
       "color": "#0D52D1" 
 
      }, { 
 
       "country": "Russia", 
 
       "visits": 580, 
 
       "color": "#2A0CD0" 
 
      }, { 
 
       "country": "South Korea", 
 
       "visits": 443, 
 
       "color": "#8A0CCF" 
 
      }, { 
 
       "country": "Canada", 
 
       "visits": 441, 
 
       "color": "#CD0D74" 
 
      }, { 
 
       "country": "Brazil", 
 
       "visits": 395, 
 
       "color": "#754DEB" 
 
      }, { 
 
       "country": "Italy", 
 
       "visits": 386, 
 
       "color": "#DDDDDD" 
 
      }, { 
 
       "country": "Taiwan", 
 
       "visits": 338, 
 
       "color": "#333333" 
 
      }], 
 
      "valueAxes": [{ 
 
       "position": "left", 
 
       "axisAlpha":0, 
 
       "gridAlpha":0 
 
      }], 
 
      "graphs": [{ 
 
       "balloonText": "[[category]]: <b>[[value]]</b>", 
 
       "colorField": "color", 
 
       "fillAlphas": 0.85, 
 
       "lineAlpha": 0.1, 
 
       "type": "column", 
 
       "topRadius":1, 
 
       "valueField": "visits" 
 
      }], 
 
      "depth3D": 40, 
 
      "angle": 30, 
 
      "chartCursor": { 
 
       "categoryBalloonEnabled": false, 
 
       "cursorAlpha": 0, 
 
       "zoomable": false 
 
      }, 
 
      "categoryField": "country", 
 
      "categoryAxis": { 
 
       "gridPosition": "start", 
 
       "axisAlpha":0, 
 
       "gridAlpha":0 
 

 
      }, 
 
      "export": { 
 
       "enabled": true 
 
      } 
 

 
     }, 0); 
 
    });

#chartdiv { 
 
    width: 100%; 
 
    height: 500px; 
 
} \t \t

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> 
 
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> 
 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<script src="//code.angularjs.org/1.5.4/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="stretch" ng-init="quantity=2000;cost=2"> 
 
    {{quantity}} 
 
    <p id="access">USA Value: {{ quantity * cost }}</p> 
 
</div> 
 
<div id="chartdiv"></div>

來源

2017-09-14 05:07:24 Rahul

我已將你的小提琴複製到單獨的小提琴中，它不起作用？當我運行它時，沒有圖表？在這裏看到： https://jsfiddle.net/daavzz8b/ –

@HenryBlue請參閱更新回答 – Rahul

感謝您的迴應，但我不想在JavaScript中硬編碼值。我希望能夠將AngularJS表達式傳遞給javascript，而不是其他方式。你有任何解決方案嗎？ –

將角度表達式傳遞到Javascript

回答

相關問題