Issue: TypeError: Cannot read property 'length' of undefined at ctrl.getPlaceholder

[balteo]

I use the latest version of Angular ui select and I get the following error:

TypeError: Cannot read property 'length' of undefined
at ctrl.getPlaceholder (http://localhost:8080/bower_components/angular-ui-select/dist/select.js:507:40)
at $parseFunctionCall (http://localhost:8080/bower_components/angular/angular.js:12299:18)
at Object.expressionInputWatch (http://localhost:8080/bower_components/angular/angular.js:12702:31)
at Scope.$digest (http://localhost:8080/bower_components/angular/angular.js:14187:40)
at Scope.$apply (http://localhost:8080/bower_components/angular/angular.js:14457:24)
at http://localhost:8080/bower_components/angular/angular.js:16183:36
at completeOutstandingRequest (http://localhost:8080/bower_components/angular/angular.js:4889:10)
at http://localhost:8080/bower_components/angular/angular.js:5269:7

Here is my markup:

<div class="form-group">
    <label class="control-label col-lg-2" for="languages">languages</label>
    <div class="col-lg-5">
        <ui-select id="languages" name="languages" multiple ng-model="curriculum.languages" reset-search-input="true" theme="bootstrap">
            <ui-select-match placeholder="Select language...">{{$item.description}}</ui-select-match>
            <ui-select-choices repeat="language in languages" refresh="chooseLanguages($select.search)" refresh-delay="0">
                {{language.description}}
            </ui-select-choices>
        </ui-select>
    </div>
    <div ng-messages="curriculumForm.languages.$error" class="col-lg-5">
        <div ng-message="languages.minSize">min size</div>
    </div>
</div>

I am not sure if this is a bug or if I am getting something wrong...

[soosap]

Wer you able to resolve this? I am stuck with exactly the same issue.

[balteo]

No I wasn't unfortunately.
Le 11 janv. 2015 18:57, "soosap" [email protected] a écrit :

Wer you able to resolve this? I am stuck with exactly the same issue.

—
Reply to this email directly or view it on GitHub
#519 (comment)
.

[natalie03]

I was having this issue earlier and managed to fix it. Your ng-model is a list that the select is pushing to... so it should be something like selectedLanguages and then in your controller create $scope.selectedLanguages = []. When you need to retrieve the data you can create an object with curriculum.languages: $scope.selectedLanguages.

Hope that helps!

[balteo]

Thanks a lot for your input Natalie. :-)

Can you please explain what you think the issue has got to do?

My $scope.curriculum.languages variable is already of type array and is bound to the $scope.

Regards,

Julien.

[justsml]

+1
I've got the same issue - angular v1.3.2-1.3.8

http://plnkr.co/edit/ZN2ypoNYshJfm6mJP7P0?p=preview

[schitupolu]

+1.

Its happening in the watch of
$scope.$watchCollection('$select.selected', function(selectedItems){

At line 312: we have
if (!selectedItems.length) {
Here , selectedItems is undefined which is causing the issue.

[justsml]

Figured out the repeater error / 'Can't Interpolate bug' / getPlaceholder.
The html was nested wrong, fixed at: http://plnkr.co/edit/5nGBf9EsdZsPBCx1kdvI?p=preview
Hopefully helps someone else.

[schitupolu]

Just to add to this, in my case i get the dropdown list async, so initially we need to define
$scope.people = [];
and then update the people with data .i.e. $scope.people = data;
This solves the issue
http://stackoverflow.com/questions/20432127/angularjs-interpolation-error

[NateVonSmith]

To elaborate on skchi's very helpful answer, I ended up needing to instantiate my objects at the very top of the directive (in my case). I have a function for grabbing the data I use to populate the select box and I was declaring my 'scope.users.selected = [];' within that function.

Once I moved that declaration outside the function and to the top of the link section, the length errors were gone.

Hope that helps!

[felipebcs]

@natalie03 thanks! This solved my issue.

[sime]

@justsml Have you noticed that your solution omits an actual Placeholder from being rendered?

[sime]

My bad. Removing the role displays the placeholder.

[newbyca]

Same problem here. Making sure ng-model is bound to an initialized array worked-around for me too. (per @skchi and @NateVonSmith)

[stevematyas]

@newbyca : Ditto. And to spell it out for everyone else

'use strict';

angular.module('myApp')
    .controller('MyControllerWithUISelectFormElements', ['YourServiceOrResource1', 'YourServiceOrResource2', function (YourServiceOrResource1, YourServiceOrResource2) {
        //default to empty arrays so the ui-select ng-models have an initialized object to "bind" to.
        $scope.ngModelScopeUiSelectElement1 = []; //<ui-select ... ng-model="ngModelScopeUiSelectElement1" ... >
        $scope.ngModelScopeUiSelectElement2 = []; //<ui-select ... ng-model="ngModelScopeUiSelectElement2" ... >
        //...
        $q.all([YourServiceOrResource1.query().$promise, YourServiceOrResource2.query().$promise])
            .then(function (result) {
                $scope.ngModelScopeUiSelectElement1 = result[0];
                $scope.ngModelScopeUiSelectElement2 = result[1];
            });
    }]);

[nikolai-b]

would be solved by #996 or #1004 or #956

[MiracleHu]

skchi's solution is correct.
skchi commented on 30 Jan
Just to add to this, in my case i get the dropdown list async, so initially we need to define
$scope.people = [];
and then update the people with data .i.e. $scope.people = data;
This solves the issue
http://stackoverflow.com/questions/20432127/angularjs-interpolation-error

[mstmustisnt]

@skchi, thank you very much! :)

[fpernia]

@natalie03 thanks a lot!!! Your suggestion ("in your controller create $scope.selectedLanguages = []") it solved all of my problems :)
👍

[vurso]

@natalie03 nice find this is a real gotcha if you're not careful with ui-select