angular ng-repeat ディレクティブを使用して JSON データをレンダリングしようとしています。これはアイテムの配列であり、すべてのアイテムにはタグの配列と他のアイテム データがあります。angular-ui/select-ui を使用して、select2 でタグをレンダリングしています。Select2 要素は、Angular コントローラーで定義済みの使用可能なタグ (tagList) の配列を使用します。
<ui-select multiple ng-model="element.tags" ng-change="addTag(element.tags, $index)" theme="select2">
<ui-select-match ui-lock-choice="$item.locked" placeholder="Add new tag..." value="Add new tag...">
<div style="color: {{$item.color}};">
{{$item.label}}
</div>
</ui-select-match>
<ui-select-choices refresh="refreshTags($select.search, element.itemTags, $index)" refresh-delay="0"
repeat="tag in tagList[$index] | filter: $select.search">
<div ng-bind-html="tag.label | filter: $select.search"></div>
<small>
{{tag.description}}
</small>
</ui-select-choices>
</ui-select>
問題は IE8 にあり、一貫性がありません。
- {{tag.description}} および/または tag.label は angular によって処理されず、ドロップダウンの選択肢リストにそのまま出力されます。
- プレースホルダー (「新しいタグを追加...」) が IE8 および IE9 でレンダリングされない
どんな助けでも大歓迎です!ありがとう。
更新タグ:
$scope.refreshTags = function (term, tags, index)
{
var labels = [];
$scope.tagList[index] = $scope.tagSource;
tags.forEach(function (item) {
labels.push(item.label);
});
if (labels.length) {
$scope.tagList[index] = $scope.tagList[index].filter(function(tag) {
return labels.indexOf(tag.label) == -1;
});
}
if (term.length) {
$scope.tagList[index] = $scope.tagList[index].filter(function(tag) {
return tag.label.indexOf(term) > -1;
});
}
};