Angularjs 使用ng选项将glyphicon图标添加到“已保存”的选定项

如果我们有这样的场景

包含3个元素的下拉列表。选择项目并单击“保存”按钮后，下拉菜单中的ng模型将绑定一个html标记，以便ng模型现在在项目名称之前附加一个glyphicon图标

我已经尝试了一个基本的实现，但是我无法完成它

模型

景色

我想要的是这个

当前ng型号“项目1”的更换/更新与活页夹完全相同，包括勾号

此外，我尝试使用ng repeat做同样的事情，但是这不是我的选择，因为我需要在整个应用程序中使用对象属性。根据我的理解，使用ng repeat时，所选值似乎是字符串而不是对象

提前感谢您提供的任何帮助或建议：

A如果您的意思是要将字形图标添加到选择中，那么这并不简单，我可以为您指出

B如果您想添加简单的UTF-8符号，则如下所示

app.filter('renderSymbol', function(){
  return function(val){
    var symbol =  document.createElement('div');
    symbol.innerHTML = val;
    return symbol.childNodes[0].nodeValue;
  };
});

最有效的方法是向数据对象添加一个新值，以保存所需的图标/符号，以便在需要时使用它

因此，在“保存项目”功能中，您正在保存图标/符号值，使其远离您的姓名

$scope.saveItem = function(item) {
    var index = $scope.data.indexOf(item);
    $scope.data[index].symbol= "✓"; 
};

然后，您可以按自己的意愿显示输出，如下所示

<div ng-bind-html="selectedItem.symbol + ' ' + selectedItem.name"></div>

要在选择选项中渲染符号，需要使用自定义过滤器，如下所示

app.filter('renderSymbol', function(){
  return function(val){
    var symbol =  document.createElement('div');
    symbol.innerHTML = val;
    return symbol.childNodes[0].nodeValue;
  };
});

过滤器将获取每个选项的值，并将它们放在一个div中，该div将为您呈现符号

过滤器用于ng选项中，如图所示：

ng-options="item as (item.symbol + ' ' +  item.name | renderSymbol) for item in data"

输出：

以下是一个工作示例：

app.filter('renderSymbol', function(){
  return function(val){
    var symbol =  document.createElement('div');
    symbol.innerHTML = val;
    return symbol.childNodes[0].nodeValue;
  };
});

ng-options="item as (item.symbol + ' ' +  item.name | renderSymbol) for item in data"