angularjsangularjs-directiveangularjs-ng-repeatjquery-select2jquery-select2-4
How to prevent select2 from clearing the selected value when clicking on select2 in next row
My web application uses angularjs and php. In the website, there is a section to add estimates by the user. It has select2 as dropdown which populates existing items in the inventory.
<tr class="valign-top"
ng-repeat="estimate in workorder.steps[1].estimates track by $index"
ng-init="item_key = $index">
<div id="material_div{{$index}}"
ng-if="estimate.type == 'material'"
class="create_Wo_forms inspec_crt_forms margin-0">
<select
style="width: 100%!important;"
id="parts_selected{{$index}}"
stepIndex="{{estimatesselectedStep}}"
itemIndex="{{$index}}"
class="crt-wo-input inspec-input"
item_wo_create_select>
</select>
</div>
</tr>
The entire section is in an ng-repeat in HTML file.
directive('itemWoCreateSelect', function () {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var stepIndex = attrs.stepindex;
var elemIndex = attrs.itemindex;
var item = scope.workorder.steps[stepIndex]['estimates'][elemIndex];
$(elem).append('<option>' + item['name'] + '</option>');
scope.selected_items = [];
angular.forEach(scope.workorder.steps[stepIndex]['estimates'], function (v) {
if (v['item_id'] && v['item_id'] != null && !(v['item_id'] == item['item_id'] && v['unit_cost'] == item['unit_cost'])) {
scope.selected_items.push({ 'item_id': v['item_id'], 'unit_price': v['unit_cost'] });
}
});
var formatRepo = function (repo) {
if (repo.loading)
return repo.text;
var markup = '<span class="label">';
if (repo.hasOwnProperty('item_name') && repo.item_name.trim()) {
markup += repo.item_name + ' (' + repo.unit_price + ')' + '';
} else {
markup += repo.text + '';
}
markup += '</span>';
return markup;
};
var formatRepoSelection = function (repo) {
if (repo.hasOwnProperty('item_name')) {
return repo.item_name + ' (' + repo.unit_price + ')';
} else {
item['name'] = repo.id;
return repo.id;
}
};
$(elem).select2({
placeholder: "Search for item",
tags: true,
ajax: {
type: 'POST',
url: version5Url + 'inventory/getMasterStocksForInvoice',
tags: true,
data: function (params) {
return {
token: scope.token,
user_id: scope.user_id,
client_id: scope.client_id,
search: params.term,
selected_items: scope.selected_items
};
},
dataType: 'json',
delay: 250,
processResults: function (data, params) {
$(elem).find('option').remove();
if (item['item_id']) {
delete item['item_id'];
}
item['unit_cost'] = 0;
item['applied_taxes'] = [];
item['selected_tax'] = [];
item['amount'] = 0;
item['quantity'] = 0;
item['description'] = '';
scope.details = data.parts;
scope.$apply();
return {
results: data.parts,
pagination: false
};
},
cache: false
},
escapeMarkup: function (markup) {
return markup;
},
minimumInputLength: 0,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
$(elem).on("select2:select", function () {
var index = parseInt($(elem).val());
console.log("Slect", index)
if (!isNaN(index)) {
angular.forEach(scope.details, function (value, k) {
if (value['id'] == index) {
item['quantity'] = 1;
item['lot_number'] = value.lot_number;
item['item_id'] = value.item_id;
item['name'] = value.item_name + ' (' + value.unit_price + ')';
item['description'] = value.item_description;
item['unit_cost'] = value['unit_price'];
item['applied_taxes'] = [];
item['selected_tax'] = [];
if (value['taxes'] != '' && value['taxes'] != null) {
var tax_array = value['taxes'].split(',').map(function (x) {
return parseInt(x);
});
angular.forEach(scope.newTaxes, function (value, key) {
angular.forEach(tax_array, function (v1, k1) {
if (value['tax_id'] == v1) {
tax_array.splice(k1, 1);
}
});
});
item['applied_taxes'] = tax_array;
angular.forEach(tax_array, function (value) {
var result = scope.taxes.filter(function (obj) {
return obj.tax_id == value;
});
if (result.length > 0) {
item['selected_tax'].push(result[0].tax_name + ' (' + result[0].rate + '%)');
}
});
}
}
});
} else {
if (item['item_id']) {
delete item['item_id'];
}
item['unit_cost'] = 0;
item['applied_taxes'] = [];
item['selected_tax'] = [];
item['amount'] = 0;
item['quantity'] = 0;
item['description'] = '';
}
scope.$apply();
});
}
};
})
The select2 is initialized by a directive in the js file.
All these functions used to work in select2 version 3.x. But I upgraded the select2 to version 4.0.13 recently and the select2 dropdown in estimates section is not working properly anymore.
ISSUE: Selection in the first row is fine. When a new row is added, the selected value in select2 dropdown of the first row gets cleared.
Please ask for more info if needed. Thanks in advance!
Solution
From Joe Enzminger's Anwser The trick here is to wrap the select2 initialization inside a timeout function so that the options will be available in DOM as part of a normal select dropdown. Only after the options are part of DOM, can the dropdown be transformed into a select2 dropdown.
The first $timeout is necessary because the options won't be in the DOM until the next digest cycle. The problem with this is that new options won't be added to the control if the model is later changed by your application.
$timeout(function() {
$(elem).select2({
placeholder: "Search for item",
tags: true,
ajax: {
type: 'POST',
url: version5Url + 'inventory/getMasterStocksForInvoice',
tags: true,
data: function (params) {
return {
token: scope.token,
user_id: scope.user_id,
client_id: scope.client_id,
search: params.term,
selected_items: scope.selected_items
};
},
dataType: 'json',
delay: 250,
processResults: function (data, params) {
$(elem).find('option').remove();
if (item['item_id']) {
delete item['item_id'];
}
item['unit_cost'] = 0;
item['applied_taxes'] = [];
item['selected_tax'] = [];
item['amount'] = 0;
item['quantity'] = 0;
item['description'] = '';
scope.details = data.parts;
scope.$apply();
return {
results: data.parts,
pagination: false
};
},
cache: false
},
escapeMarkup: function (markup) {
return markup;
},
minimumInputLength: 0,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
});