How can i pass extra parameter when color changed?

Question

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

I am using this angularjs color picker.

https://github.com/ruhley/angular-color-picker/

I want to use it like below

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

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

Can you please help me to solve out this issue?

eventApi is an object which need to be declared by the controller so it's not a function. What the type of extraParameter? Can you give a real life example? — Mosh Feu
– Mosh Feu, Commented May 28, 2019 at 14:36
In my project, I have 3 buttons of the color picker. As per event, I am getting which color selected in onchange function of event api 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? — Jaydeep Shah
– Jaydeep Shah, Commented May 29, 2019 at 5:17

Mosh Feu · Accepted Answer · 2019-05-29 10:16:25Z

You can add an attribute (Let's say id) to the component and read it in the onChange callback (using the api).

angular.module('app', ['color.picker']).
controller('ctrl', function($scope) {
  $scope.color = '#FF0000';
  $scope.eventApi = {
    onChange:  function(api, color, $event) {
      const id = api.getElement().attr('id');
      console.log(id, color);
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-color-picker/3.4.8/angularjs-color-picker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-color-picker/3.4.8/angularjs-color-picker.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <color-picker id="cp-1" ng-model="color" options="options" api="api" event-api="eventApi"></color-picker>
</div>

https://stackblitz.com/edit/angularjs-bqe6ht?file=home%2Fhome.controller.js

Collectives™ on Stack Overflow

How can i pass extra parameter when color changed?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related