Question

我已经使用ng model填充了json。然后将其放入页面底部的绑定框中ng-binding colourpicker正在动态使用，并且正在进行两个元素更改，文本框和框如此处所示http://codepen.io/voronianski/pen/zpahm。

我要么需要文本十六进制代码（哪个更好）或RGB代码。这是一种可能性。

我的代码与codepen完全相同。

  <script type="text/javascript">
  var hexText="";
  var colorList = [ '000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333',
  '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933',
  '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66'];
var codeHex = $(this).data('hex');
hexText = codeHex;
var picker = $('#color-picker');

for (var i = 0; i < colorList.length; i++ ) {
picker.append('<li class="color-item" data-hex="' + '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>');
}

$('body').click(function () {
picker.fadeOut(1);
});

$('.call-picker').click(function(event) {
event.stopPropagation();
picker.fadeIn(1);
picker.children('li').hover(function() {
  var codeHex = $(this).data('hex');

  $('.color-holder').css('background-color', codeHex);
  $('#pickcolor').val(codeHex);
});
});
  </script>

HTML

<div class="color-wrapper">
  <p>Choose color for Header</p>
   <!-- ng-model="eventData.header" This is to post the information in the color picker box into the json at the bottom to make it useable by the server. -->
  <input type="text" name="custom_color" ng-model="eventData.header" placeholder="#FFFFFF" id="pickcolor" class="call-picker">
  <div class="color-holder call-picker"></div>
  <div class="color-picker" id="color-picker" style="display: none"></div>
</div>

Answer 1

正如您所看到的那样，文本十六进制代码在此处刷新 var codeHex = $(this).data('hex');

如您所见，此值用于放置在文本框中 $('#pickcolor').val(codeHex);

如果你想从这个函数中使用这个值，只需在这个函数之外声明一个变量并使用它就像

一样

var hexText="";
var colorList....
....
var codeHex = $(this).data('hex');
hexText = codeHex;

如果您只需要没有锐利的十六进制代码，请查看js

中的字符串操作函数

Answer 2

如果你使用Angular，你应该尝试永远不要使用JQuery。

几种颜色选择器可用于角度：

将动态变化的信息添加到ng-binding中

2 个答案: