CODEWITHSUNDEEP
javascriptangularjsd3.js
nikunj2512
nikunj2512

Reputation: 621

D3 and angularjs radio button intergation

I want to add few radio button like shown below in the legend of my this http://jsfiddle.net/nikunj2512/phsdeq4v/ D3 chart. So that when i click on any radio button it should call the function defined in the controller to fetch the data and then update the chart.

enter image description here

Also, this date should be customize-able, so that i can pass something like config while calling the d3Chart directive and according to my config, code should add appropriate number of radio buttons.

My problems:

1) get the value of the clicked radio button and pass the value of selected radio button & call a appropriate function in the controller?

Please anyone has any idea how to achieve this?

Upvotes: 0

Views: 96

Answers (1)

NiranjanK
NiranjanK

Reputation: 437

Please check this link..iCheck

U can easily integrate with angulerjs using directives. Pls check below ex.

angular.module('test').directive('icheck', ['$timeout', '$parse',function($timeout, $parse) {
return {
    require: 'ngModel',
    link: function($scope, element, $attrs, ngModel) {
        return $timeout(function() {
            var value = $attrs['value'];
            $scope.$watch($attrs['ngModel'], function(newValue){
                $(element).iCheck('update');
            })

            $scope.$watch($attrs['ngDisabled'], function(newValue) {
                $(element).iCheck(newValue ? 'disable':'enable');
                $(element).iCheck('update');
            })

            return $(element).iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green'
            }).on('ifChanged', function(event) {
                if ($(element).attr('type') === 'checkbox' && $attrs['ngModel']) {
                    $scope.$apply(function() {
                        return ngModel.$setViewValue(event.target.checked);
                    });
                }
                if ($(element).attr('type') === 'radio' && $attrs['ngModel']) {
                    return $scope.$apply(function() {
                        return ngModel.$setViewValue(value);
                    });
                }
            });
        });
    }
};

}]);

and use it in UI like..

<input type="checkbox" icheck name="Check" ng-model="checkConfig" ng-change="updateMode()"/>

Upvotes: 0

Related Questions