IE，ng-repeat用于选择剪切文本或显示{{}}

Question

基本问题

我有一个多选（列表），这取决于我如何编写html / angular有一个bug。在第一种情况下，最后3个字符从渲染中切除。在第二种情况下，名称不可见，而是{{}}占位符，直到单击该项目为止。

我只是想让我以正确的方式展示元素而不会出错。

最后，如果在页面和select已经渲染之后将一个元素添加到categories数组中，则会出现这种情况。

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

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

使用ng-options

使用ng-options一切都会出现，但我无法实际点击元素来选择它们 - 它们被冻结了。

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

由于没有人写过答案，请将自己的解决方案视为已接受的答案。

Answer 1

我自己的解决方法

似乎问题在于在初始渲染发生后向categories数组添加项目。我找到了两个解决方法：

1. 仅将所有元素添加到数组中，而不再添加OR
2. 使用dom隐藏select ng-if元素100分钟，然后再次显示。这会强制浏览器重新渲染元素并正确呈现它们。

在HTML中（包装选择）：

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

在控制器（Javascript）中：

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