Мое веб-приложение использует angularjs и php. На сайте есть раздел для добавления оценок пользователя. В качестве выпадающего списка выбрано select2, которое заполняет существующие предметы в инвентаре.
<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>
Весь раздел находится в ng-repeat в файле HTML.
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();
});
}
};
})
Select2 инициализируется директивой в файле js.
Все эти функции использовались в select2 версии 3.x. Но я недавно обновил select2 до версии 4.0.13, и выпадающий список select2 в оценочном разделе больше не работает должным образом.
ВЫПУСК: Выбор в первом ряду в порядке. При добавлении новой строки выбранное значение в выпадающем списке select2 первой строки очищается. 
Пожалуйста, запросите дополнительную информацию, если это необходимо. Заранее спасибо!