Angular ui-select not array filter

Question

Angular ui-select not array filter

Navigation

#1 by (0 votes)

0

Using angular ui-select. Documentation u-i angular selection

In a select input you want to show the names of the ports.

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

The backend information is brought

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);






    });

When selecting a port, it is not selected in the input and throws the following error

Expected array but received: {"portCode": "0106", "portName": "HOULTON", "$$ hashKey": "object: 1266"}

And this throws the documentation on this kind of error

Description This error occurs when the filter is not used with an array:

<input ng-model="search">

{{key}}: {{value}}

javascript angularjs

asked by Gabo Ruiz 17.06.2017 в 02:05

source

1 answer

Problem with IPN assign a variable an array

score 0 · Accepted Answer

The ng-model of the ui-select directive refers to the object that is selected, therefore it is erroneous to make the binding to shipmentObject.portArray . In the current code when an element is selected then shipmentObject.portArray is replaced by the selected object and causes the error when the ui-select-choices repeat directive tries to read shipmentObject.portArray again after the digest cycle .

Create a property of $scope.selected in the controller and change the ng-model of ui-select

<ui-select ng-model="selected" theme="bootstrap" style="width:auto;">