TypeError: Cannot call method 'replace' of undefined

Question

I am pretty new to angularJS. I want to use a typeahead for one of my textboxes but when i use it it does that error:

TypeError: Cannot call method 'replace' of undefined at Scope. (http://XX.YY.ca/js/lib/ui-bootstrap.js:3426:32) at fnInvoke (http://XX.YY.ca/js/lib/angular.js:10017:21) at OPERATORS.| (http://XX.YY.ca/js/lib/angular.js:9532:59) at Object.extend.constant [as get] (http://XX.YY.ca/js/lib/angular.js:9962:14) at Scope.$digest (http://XX.YY.ca/js/lib/angular.js:11800:40) at Scope.$apply (http://XX.YY.ca/js/lib/angular.js:12061:24) at HTMLButtonElement. (http://XX.YY.ca/js/lib/angular.js:17839:21) at HTMLButtonElement.n.event.dispatch (http://code.jquery.com/jquery-1.11.0.min.js:3:8066) at HTMLButtonElement.r.handle (http://code.jquery.com/jquery-1.11.0.min.js:3:4767)

My code is basically the same as the one on the angular-ui website. Here it is:

Markup:

<div class="modal-body">
    <div class="form-group">
        <input type="text" id="customer" autocomplete="off"
               ng-model="nom" tabindex="0"
               typeahead="customer.customerFirstName for customer in getCustomers($viewValue) | filter:$viewValue"
               typeahead-wait-ms="300" typeahead-on-select="setId($item)"
               typeahead-editable="false" class="form-control input-sm" placeholder="Customer" />
    </div>
</div>

Controller:

    [...]
    $scope.getCustomers = function (val) {
        return $http.get('/index.php/customers/get_customers_ajax', {
            params: {val: val}
        }).then(function (res) {
            var customers = [];
            angular.forEach(res.data, function (item) {
                customers.push({
                    'customerID': item.customerID,
                    'customerFirstName': item.customerFirstName,
                    'customerLastName': item.customerLastName
                })
            })
            console.log(customers);
            return customers;
        });
    }
    $scope.setID = function ($item) {
        $scope.newOrder.customerID = $item.customerID;
        Console.log($scope.newOrder.customerID);
    }
});

Backend response:

[
    {"CustomerID":"1","CustomerLastName":"Pan","CustomerFirstName":"Petter"}, 
    {...}
]

I don't know what additionnal information i can provide, but if any, ask and i will post !

Answer 1

I think you should change this line:

typeahead="customer.customerFirstName for customer in getCustomers($viewValue) | filter:$viewValue"

It seems that the syntax should be:

typeahead="<name> for <name> in getCustomers($viewValue) | filter:$viewValue"

if <name> in the first position is not equal to <name> in second position it returns an error.

Try to change your code to:

typeahead="customer for customer in getCustomers($viewValue) | filter:$viewValue"

And in your javascript put customerFirstName direcly in returned array.

Answer 2

I think the problem is you are setting ng-model="nom", but you don't have a $scope.nom variable defined in your controller. Angular is trying to bind the customer selected from the typeahead to a nom variable in your controller.