I have a table that contains different elements, one of them must be a select using Select2 to facilitate the searches. It turns out that when I add the properties to turn it into a Select2 search select, it does not work ... this is my code
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".js-example-basic-single").select2({
placeholder: "Seleccione"
});
});
function clearFileInputField(tagId) {
document.getElementById(tagId).value = "";
}
</script>
<section class="content-header">
<h1>{{vm.title}}</h1>
<!--<ol class="breadcrumb">
<li><a ui-sref="app.landing"><i class="fa fa-dashboard"></i> Inicio</a></li>
<li class="active">Nueva Póliza</li>
</ol>-->
</section>
<section class="content">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Documentos del Reclamo</h3>
<div class="box-tools pull-right">
<button class="btn btn-danger" title="Devolver Documentos" ng-disabled="!vm.sendmail" class="btn btn-xs btn-primary" ng-click="vm.retufiles()">Devolver Documentos
</button>
</div>
</div>
<form class="form-horizontal" name="uiForm" ng-submit="vm.save(uiForm.$valid)" novalidate>
<div class="box-body" style="overflow-x:scroll;">
<div ng-if="vm.alerts" class="alert alert-{{alert.type}}" ng-repeat="alert in vm.alerts">
<h4>{{alert.title}}</h4>
<p>{{alert.msg}}</p>
</div>
<table style="border-collapse: separate; border-spacing: 8px; overflow-x:scroll;">
<tr ng-repeat="pline in vm.previouslines" style="height: 120px" ng-if = "vm.previouslines[$index].dispatched == '0' " >
<td style="height: 120px !important">
<div class="col-sm-10 col-md-10" style="height: 120px !important">
<div class="form-group" ng-class="{ 'has-error': uiForm.pdoc_type_id{{pline.id}}.$invalid && ( vm.formSubmitted || uiForm.pdoc_type_id{{pline.id}}.$touched) }">
<label for="pdoc_type_id{{pline.id}}">Tipo de Documento</label>
<select class="form-control" style='font-size: 14px; width: 150px;' ng-model="vm.previouslines[$index].id_doc_type" name="pdoc_type_id{{pline.id}}" ng-change="vm.changeDocType($index,2);" required >
<option style="font-size: 17px" ng-repeat="doc in vm.systemDocTypes" ng-value="{{doc.id}}" ng-selected="{{1 == doc.id}}">{{doc.name}}</option>
</select>
<p class="help-block">Requerido.</p>
</div>
</div>
</td>
<td style="height: 120px !important">
<div class="col-sm-10 col-md-10" style="height: 120px !important" >
<div class="js-example-basic-single" ng-class="{ 'has-error': uiForm.pcurrency_id{{pline.id}}.$invalid && ( vm.formSubmitted || uiForm.pcurrency_id{{pline.id}}.$touched) }" id="table">
<a class="btn btn-xs btn-primary" ng-click="vm.modalProvider()" ><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
<label for="pdoc_type_id{{pline.id}}" class="control-label">Proveedor</label>
<select class="js-example-basic-single" style='font-size: 14px; width: 150px;' ng-model="vm.previouslines[$index].provider_id" placeholder="Seleccione" name="provider_id{{pline.id}}" required
ng-options="doc.id as doc.name for (key, doc) in vm.systemProviders">
<option value="">- Seleccione -</option>
<option style="font-size: 17px" ng-repeat="doc in vm.systemProviders" ng-value="{{doc.id}}" >{{doc.name}}</option>
</select>
<p class="help-block">Requerido.</p>
</div>
</div>
</td> But when executing the application, the select looks normal, without the functions of the select2. What should I do ?
