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

【问题标题】：IE, ng-repeat for select cutting text or showing {{}}IE, ng-repeat 用于选择剪切文本或显示 {{}}
【发布时间】：2016-11-22 01:28:04
【问题描述】：

基本问题

我有一个多选（列表），这取决于我如何编写 html/angular 有一个错误。在第一种情况下，最后 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>

由于没有人写答案，所以将我自己的解决方法视为接受的答案。

【问题讨论】：

标签： javascript angularjs internet-explorer-11

【解决方案1】：

我自己的解决方法

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

只将所有元素添加到数组中，无需再次添加或
使用ng-if 隐藏dom select 元素100 毫秒并使其再次可见。这会强制浏览器重新渲染元素并正确渲染它们。

在 HTML 中（包装选择）：

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

在控制器中（Javascript）：

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

【讨论】：