ruhley / angular-color-picker

Vanilla AngularJS Color Picker Directive with no requirement on jQuery
http://ruhley.github.io/angular-color-picker/
MIT License
166 stars 79 forks source link

How can i pass extra parameter when color changed? #190

Open jaydeeptops opened 5 years ago

jaydeeptops commented 5 years ago

Hello

I want to pass some addition parameter like this when the color changed?

<color-picker` ng-model="account_type.type_color" options="options" event-api="eventApi(extraParameter)">

Can you please help me solve this issue?

Thanks

ruhley commented 5 years ago

@jaydeeptops See this example html and javascript for how to use the event api. Let me know if that helps you or not.

jaydeeptops commented 5 years ago

@ruhley I had already seen the examples but I didn't get an exact solution so I tried to post a question. Let me brief about the scenarios.

In my project, I have 3 buttons of the color picker. As per event, I am getting which color selected in the onchange event but i need something to pass in the event api that which button type clicked. Like i have 3 buttons A, B, C. When color changed for A button then I want to pass type A in the onchange event. Can you please provide me a solution how can I pass it?

Thanks

ruhley commented 5 years ago

@jaydeeptops I think you would have to create separate event apis and do something like this

$scope.onChange = function (color, type) {
    console.log(color, type);
};

$scope.eventApiA = {
    onChange: function(color) {
        $scope.onChange(color, 'A');
    }
};

$scope.eventApiB = {
    onChange: function(color) {
        $scope.onChange(color, 'B');
    }
};

$scope.eventApiC = {
    onChange: function(color) {
        $scope.onChange(color, 'C');
    }
};

Let me know if that solves it for you.

jaydeeptops commented 5 years ago

@ruhley Thanks for the solution. But is there any other solution to pass parameters in the function?

ruhley commented 5 years ago

@jaydeeptops Unfortunately not.

jaydeeptops commented 5 years ago

@ruhley Thanks for the reply. I have implemented as you suggested. I have one more question is there any button that I can put to save the color? Right now what happened I changed the color and it suddenly fires the onchange event of the apiEvent function. But I want to put one select button if the user confirmed which color he need then he clicked on save.

ruhley commented 5 years ago

In the click event of the other button you should be able to get the value from ng-model without using the onChange event - https://github.com/ruhley/angular-color-picker/blob/master/examples/01-simple.html#L254 and https://github.com/ruhley/angular-color-picker/blob/master/examples/app.js#L29