1

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?

2
  • 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? 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? Commented May 29, 2019 at 5:17

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.