1

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;
        });
    }
};
4

0 に答える 0