单选按钮自定义指令

时间:2016-06-24 12:20:21

标签: javascript angularjs highcharts

我有一个指令,它将highcharts area-spline图表变成一个可重用的元素:

angular.module('statisticsApp')
    .directive('stockchart', function ($http) {

        return {
            transclude: true,
            template: '<div></div>',
            restrict: 'E',
            scope: {},
            link: function postLink(scope, element, attrs) {
                // scope.country=attrs.country;
                var type=attrs.type;
                var currencies=attrs.currencies;
                var baseRestUrl="http://mydomain/background/rest/statistics";
                var realUrl=baseRestUrl + "/" + type;
                if (type == "equity") {
                    realUrl += "/" + scope.country;
                    scope.header="Equity per day - " + scope.country;                   
                }
                // alert(realUrl);
                $http.get(realUrl).then(
                    function successCallback(response){
                        var equity = response.data;
                        var arrayLength = equity.length;

                        var serie =  {
                                    name: scope.country,
                                    data: []
                                    }
                        var categories = [];
                        for ( var i = 0; i < arrayLength; i+=1) {
                            var seriesName = equity[i][2];
                            var currency = equity[i][3];
                            var date = equity[i][0];
                            var amount = equity[i][1];

                            if ( currency == "EUR") {
                                serie["data"].push(amount);
                                categories.push(date);
                            } 
                        }
                        var series = [];
                        series.push(serie);

                        element.highcharts({
                            chart: {
                                type: "areaspline"
                            },
                            title: {
                                text: scope.header
                            },
                            legend: {
                                layout: "vertical",
                                align: "left",
                                verticalAlign: "top",
                                x: 150,
                                y: 100,
                                floating: true,
                                borderWidth: 1,
                                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || "#FFFFFF"
                            },
                            tooltip:{
                                valueDecimals : 2
                            },
                            yAxis: {
                                title: {
                                    text: 'Amount'
                                }
                            },
                            xAxis: {
                                categories: categories
                            },
                            series: series
                        });
                    },
                    function errorCallBack(response){
                        equity = ["It", "did", "not", "work"];
                    }
                );
            }
        };
    });

我正在尝试绑定一些单选按钮以删除HTML硬编码的货币和国家/地区。

HTML中的

我有

<div>
    <form>
        <h3>Currency</h3>
        <input type="radio" ng-model="currency" name="currency" value="EUR"> EUR<br/>
        <input type="radio" ng-model="currency" name="currency" value="USD"> USD<br/>
        Other: <input type="text" ng-model="currency" name="currency" value=""><br/>
    </form>
    <form>
        <h3>Country</h3>
        <input type="radio" ng-model="country" name="country" value="BE"> BE<br/>
        <input type="radio" ng-model="country" name="country" value="NL"> NL<br/>
        <input type="radio" ng-model="country" name="country" value="FI"> FI<br/>
        <input type="radio" ng-model="country" name="country" value="CZ"> CZ<br/>
        <input type="radio" ng-model="country" name="country" value="DE"> DE<br/>
        <input type="radio" ng-model="country" name="country" value="FR"> FR<br/>
    </form>
    <stockchart country="BE" type="equity" currencies="EUR"></stockchart>
    <stockchart country="NL" type="equity" currencies="EUR"></stockchart>
</div>

我希望能够将最后一行简化为1行:          或者同样具有全球性的东西。

0 个答案:

没有答案