Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ui-select error "Can't interpolate: {{$select.getPlaceholder()}}"

Here is the full error I get in angular ui-select

Error: [$interpolate:interr] Can't interpolate: {{$select.getPlaceholder()}} TypeError: Cannot read property 'length' of undefined

My markup is:

  <ui-select multiple ng-model="case.keywords" theme="bootstrap">
    <ui-select-match placeholder="Select keywords...">{{$item.name}}</ui-select-match>
    <ui-select-choices repeat="keywords in keywords | filter: $select.search">
      <div ng-bind-html="keyword.name | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
<p>Selected: {{case.keywords}}</p>

Nothing special in controller other than getting the array of keywords from db. Obviously ngSanitize and ui.select are included in the module dependencies.

The other issue I have is that choices are not visible. I am able to show the selected ones, but list of choices is not visible. I am using bootstrap theme, select.css is referenced. Here's what it looks like

enter image description here

Thank you for your help.

like image 966
Sincere Avatar asked Oct 31 '22 10:10

Sincere


1 Answers

Questions from @SunilVurity and @Fiver gave me hints that lead me to resolve the issue:

First I changed keywordsto keyword in:

<ui-select-choices repeat="keywords in keywords | filter: $select.search">

Second in my controller I had:

appFactory.getKeywords().then(function (keywords){
  $scope.keywords = keywords;
  $scope.case = {};
  $scope.case.selectedKeywords = [];
});

Which I changed to:

$scope.case = {};
$scope.keywords = [];
learningCasesFactory.getKeywords().then(function (keywords){
  $scope.keywords = keywords;
  $scope.case.selectedKeywords = [];
});

As you can see in the controller, the get function is asynchronous which returns an undefined list to the view on load which caused the error I mentioned in the question. After updating the controller the error disappeared. This SO question helped AngularJS Interpolation Error.

Third the uiselect and angular versions can cause issues. My angular version is 1.2.9. This ui-select Github issue shows that upgrading the angular version solves the issue, I upgraded it to 1.3.11

Thanks @SunilVurity and @Fiver

like image 79
Sincere Avatar answered Nov 15 '22 05:11

Sincere