0

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 }}

1 respuesta 1

0

El ng-model de la directiva ui-select se refiere al objeto que se selecciona, por lo tanto es erróneo hacer el binding a shipmentObject.portArray. En el código actual cuando un elemento es seleccionado entonces shipmentObject.portArray es reemplazado por el objeto seleccionado y causa el error cuando la directiva ui-select-choices repeat intenta leer a shipmentObject.portArray nuevamente después del ciclo de digest.

Crea una propiedad de $scope.selected en el controlador y cambia el ng-model de ui-select

<ui-select ng-model="selected" theme="bootstrap" style="width:auto;">
3
  • A que te refieres con crear una propiedad de $scope.selected en el controlador?
    – Gabo Ruiz
    el 19 jun. 2017 a las 15:45
  • Quizás "crear" no es el termino más adecuado, me refiero a "definir" una propiedad en $scope que se llame selected ($scope.selected) (claro que puedes elegir el nombre que veas conveniente en lugar de selected) y asignarle un valor inicial, ya sea null o un elemento de $scope.shipmentObject.portArray
    – Leon Plata
    el 19 jun. 2017 a las 17:30
  • La idea de $scope.selected es usarlo en el ng-model de ui-select
    – Leon Plata
    el 19 jun. 2017 a las 17:33

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.