Angularjs, select2 with dynamic tags and onclick - Stack Overflow
to customize your list.
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
J it only takes a minute:
Join the Stack Overflow community to:
Ask programming questions
Answer and help your peers
Get recognized for your expertise
I use angularjs with "ui_select2" directive. Select2 draws new tags with formatting function, there are "" elements with "ng-click" attribute. How to tell angularjs about new DOM elements? Otherwise new "ng-clicks" wont work.
&input type="text" name="contact_ids" ui-select2="unit.participantsOptions" ng-model="unit.contactIds" /&
JS (angular controller):
anyFunction = function(id) {
console.log(id)
formatContactSelection = function(state) {
return "&a class=\"select2-search-choice-favorite\" tabindex=\"-1\" href=\"\" ng-click=\"anyFunction(state.id)\"&&/a&"
return $scope.unit.participantsOptions = {
formatSelection: formatContactSelection,
escapeMarkup: function(m) {
url: '/contacts/search',
quietMillis: 100,
data: function(term, page) {
term: term,
limit: 20,
page: page
results: function(data, page) {
results: data,
more: (page * 10) & data.total
The problem is that select2 creates DOM elements, that not yet discovered by angularjs, I read that new DOM elements need to be appended to some element with using angularjs $compile
function, but I cannot use it in controller.
I found a solution - I created the directive, that watches for changes in ngModel and apply it on the element, that has already ui_select2 directive. "uiRequiredTags" implements custom behavior I need for my select2 tag choices. The solution is to watch changes in ngModel attribute.
angular.module("myAppModule", []).directive("uiRequiredTags", function() {
restrict: 'A',
require: "ngModel",
link: function(scope, el, attrs) {
opts = scope.$eval("{" + attrs.uiRequiredTags + "}");
return scope.$watch(attrs.ngModel, function(val) {
var $requireL
$requireLink = el.parent().find(opts.path);
$requireLink.off('click');
$requireLink.on('click', function() {
var id, n, tagI
id = "" + ($(this).data('requiredTagId'));
if (opts.removeLinkPath && opts.innerContainer) {
$(this).parents(opts.innerContainer).find(opts.removeLinkPath).data('requiredTagId', id);
tagIds = scope.$eval(opts.model).split(',');
n = tagIds.indexOf(id);
if (n & 0) {
tagIds.push(id);
tagIds.splice(n, 1);
scope.$eval("" + opts.model + " = '" + tagIds + "'");
scope.$apply();
return $(this).toggleClass('active');
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Upcoming Events
Stack Overflow works best with JavaScript enabledJQuery Mobile 1.3 Select menu dynamic refresh - Stack Overflow
to customize your list.
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
J it only takes a minute:
Join the Stack Overflow community to:
Ask programming questions
Answer and help your peers
Get recognized for your expertise
Hi togehter i using JQM 1.3 and JQuery 1.9.1... i try to get a dynamic selectmenu working without a solution yet.
first i create a selectmenu with createDocument(div...) and .setAttribute(id,...) in the pagebeforeshow event. Then i used a lot of variations first line, second line and combined..
$("#select-keywords-list").selectmenu();
$("#select-keywords-list").selectmenu("refresh");
nothing worked yet for me..
after i added it i listen to it in the Domready($(#page).ready) function for a change event.
In the browser it works very well but on the phone i just cant get it to work. Hope someone can help me.
I also tried the native menu true and false..
51.5k125998
Working example:
$(document).on('pagebeforeshow', '#index', function(){
// Add a new select element
$('&select&').attr({'name':'select-choice-1','id':'select-choice-1','data-native-menu':'false'}).appendTo('[data-role="content"]');
$('&option&').html('Select option!').appendTo('#select-choice-1');
$('&option&').attr({'value':'1'}).html('Value 1').appendTo('#select-choice-1');
$('&option&').attr({'value':'2'}).html('Value 2').appendTo('#select-choice-1');
// Enhance new select element
$('select').selectmenu();
$(document).on('change', '#select-choice-1', function(){
alert($(this).find("option:selected").text());
One more thing, don't use document ready with jQuery Mobile, they dont work correctly together. Instead use pageinit event. If you want to find more about it look here:
196k126430718
51.5k125998
i know with a template engine its maybe easier but i tried this way
function renderItemsKeywords(results) {
var elementRoot = document.createDocumentFragment();
var elementDiv = document.createElement("div");
elementDiv.setAttribute("data-role", "fieldcontain");
var elementL = document.createElement("label");
elementL.setAttribute("for", "select-keywords-list");
elementL.setAttribute("class", "select");
elementL.appendChild(document.createTextNode("W?hle Eintrag:"));
var elementSel = document.createElement("select");
elementSel.setAttribute("name", "select-keywords-list");
elementSel.setAttribute("id", "select-keywords-list");
elementSel.setAttribute("data-native-menu", "true");
var elementOptD = document.createElement("option");
elementOptD.setAttribute("data-placeholder", "true");
elementOptD.appendChild(document.createTextNode("W?hle Eintrag"));
elementSel.appendChild(elementOptD);
var allKeywords = $().checkKeywords(results);
$.each(allKeywords, function(i, item) {
var elementOptAll = document.createElement("option");
elementOptAll.setAttribute("value", item);
elementOptAll.appendChild(document.createTextNode(item));
elementSel.appendChild(elementOptAll);
//alert(elementSel.length());
elementDiv.appendChild(elementL);
elementDiv.appendChild(elementSel);
var elementDivKey = document.createElement("div");
elementDivKey.setAttribute("id", "keylist");
elementRoot.appendChild(elementDiv);
elementRoot.appendChild(elementDivKey);
return elementR
than the other part
case 'keywords':
html = renderItemsKeywords(itemData);
$header.find("h1").html("Title");
$content.html(html);
$page.page();
$footer.find(":jqmData(role=navbar)").navbar();
$content.find(":jqmData(role=listview)").listview();
$("#select-keywords-list").selectmenu();
$("#select-keywords-list").selectmenu("refresh");
$.mobile.changePage($(this));
hope you understand what im doing
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Upcoming Events
Stack Overflow works best with JavaScript enabled}