我已经使用 ng 模型 填充了一个 json。然后将其放入页面底部的绑定(bind)框中 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>
最佳答案
如果你正在使用 Angular，你应该尽量不要使用 JQuery。
有几个颜色选择器可用于 Angular :
关于javascript - 将动态变化的信息添加到 ng-binding 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31855965/