颜色更改后如何传递额外的参数?

时间:2019-05-28 14:03:42

标签: angularjs color-picker

我想在颜色改变时传递一些附加参数吗?

我正在使用这个angularjs颜色选择器。

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

我想像下面那样使用它

var arr =
  [ [ 1 ], [ 2, 3, [ 4, 5, [ 6 ] ] ], [ 7, [ 8, 9 ] ] ]

var flatArr =
  []
  
for (var i = 0; i < arr.length; i = i + 1)
  flatArr = flatArr.concat(arr[i])

console.log(JSON.stringify(arr))
console.log(JSON.stringify(flatArr))
// [[1],[2,3,[4,5,[6]]],[7,[8,9]]]
// [1,2,3,[4,5,[6]],7,[8,9]]

您能帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

您可以向组件添加属性(例如,id)并在onChange回调中读取(使用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