maythesource.com maythesource.com - 1 month ago 16
AngularJS Question

IE, ng-repeat for select cutting text or showing {{}}

Basic Problem



I have a multi-select (list) that depending on how I write the html/angular has a bug. In the first case the last 3 characters are cut off from the rendering. In the second case the name is not visible but instead the
{{}}
placeholder until the item is clicked.

I'd simply like a way for me to display the elements in a correct fashion without bugs.

Finally, this behavior seems to happen if an element is added to the
categories
array after the page and select has rendered.

With ng-bind



<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
ng-model="selectedCategories"
ng-change="angularCategorySelectedGrants($event)"
<option ng-repeat="cat in categories" value="{{cat.id}}" ng-bind="cat.name"></option>
</select>


enter image description here

Without ng-bind



<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
ng-model="selectedCategories"
ng-change="angularCategorySelectedGrants($event)"
<option ng-repeat="cat in categories" value="{{cat.id}}">{{cat.name}}</option>
</select>


enter image description here

With ng-options



With ng-options everything appears but I am unable to actually click on the elements to select them - they are frozen.

<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
ng-model="selectedCategories"
ng-change="angularCategorySelectedGrants($event)"
ng-options="cat.name for cat in categories track by cat.id" >
</select>


Since no-one wrote an answer, see my own work-around as the accepted answer.

Answer

My own workaround

It seems the problem was with adding an item to the categories array after the initial rendering has taken place. There we two workarounds I found:

  1. Add all elements to the array only once without adding again OR
  2. Hide the dom select element utilizing ng-if for 100ms and make it visible again. This forces the browser to re-render the elemnents and renders them correctly.

In HTML (wrapping the select):

<div ng-if="categories!=undefined && categoriesLoaded">
    ...Select code here...
</div>

In the controller (Javascript):

$scope.categoriesLoaded = false;
//Trigger render
$timeout(function(){  $scope.categoriesLoaded = true;}, 0);