Utilizando ui-select de AngularJS (Angular 1). Documentacion u-i select angular
En un input select se quiere mostrar los nombres de los puertos.
<li class="col-xs-12 col-sm-6">
<div class="form-group">
<label>Port</label>
<ui-select ng-model="shipmentObject.portArray" theme="bootstrap" style="width:auto;">
<ui-select-match>{{$select.selected.shipmentObject.portArray}}</ui-select-match>
<ui-select-choices repeat="item in shipmentObject.portArray | filter: $select.search">
<div ng-bind-html="item.portName | highlight: $select.search"></div>
<!-- <small ng-bind-html="item.code | highlight: $select.search"></small> -->
</ui-select-choices>
</ui-select>
</div>
{{item.portName}}
</li>
Se trae la informacion del backend
OptimaResource.getPort(country).then(function(resp){
// this.portCode=[];
$scope.shipmentObject.ports = resp.data;
// console.log($scope.shipmentObject.ports);
var array = resp.data;
var resultado = array.map(function(elemento)
{
var dividir = elemento.split("|");
return {portCode: dividir[0], portName: dividir[1]};
});
$scope.shipmentObject.portArray = resultado;
// console.log($scope.shipmentObject.portArray);
// // console.log($scope.shipmentObject.ports);
// console.log(angular.toJson($scope.shipmentObject.portArray));
console.log($scope.shipmentObject.portArray);
console.log($scope.shipmentObject.portArray.data);
// $scope.shipmentObject.portJson = angular.toJson($scope.shipmentObject.portArray);
// console.log($scope.shipmentObject.portJson);
// console.log($scope.shipmentObject.portJson);
});
Al seleccionar un puerto, este no se queda seleccionado en el input y arroja el siguiente error
Expected array but received: {"portCode":"0106","portName":"HOULTON","$$hashKey":"object:1266"}
Y esto arroja la documentacion sobre este tipo de error
Description This error occurs when filter is not used with an array:
<input ng-model="search">
{{ key }} : {{ value }}