AngularJs过滤器：$ viewValue不处理html转义

Question

如果您在框中输入A，您会看到：

1. Alabama缺少括号中的文字
2. 阿拉斯加很好
3. 亚利桑那州显示正常，但一旦选择显示为<和 >

有关如何防止过滤器消毒或（最佳）使用正确的html字符编码和解码的想法吗？

http://jsfiddle.net/ZjPWe/64/

<div class="container">
    <div ng-controller="mainCtrl" class="row-fluid">
        <form class="row-fluid">
            <div class="container-fluid">
                <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue" />
            </div>
        </form>
    </div>
</div>

...

angular.module('myApp', ['ui.bootstrap'])
    .controller("mainCtrl", function ($scope) {
    $scope.selected = '';
    $scope.states = ['Alabama <Where is this>', 'Alaska [this is ok]', 'Arizona &lt;Select Me&gt;'];
});

Answer 1

解决此问题的一种不那么漂亮的方法是应用过滤器来清理数组元素，然后在选中时将它们取消定位。

http://jsfiddle.net/pwu0r81m/

$scope.$watch('selected', function() {
    $scope.selected = $scope.selected.replace(new RegExp('&lt;', 'g'), '<').replace(new RegExp('&gt;', 'g'), '>');
});

angular.module('myApp')
    .filter('sanitizer', function(){
        return function (items) {
            var filtered = [];
            angular.forEach(items, function(item){
                filtered.push(item.replace(new RegExp('<', 'g'), '&lt;').replace(new RegExp(">", 'g'), "&gt;"));
            });
            return filtered;
        }
    });