Question

如果我们有这种情况怎么办......

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

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

模型

var app = angular.module('myApp', ['ngSanitize'])
app.controller('myController', function($scope){
    $scope.name = 'Dylan'

    $scope.saved = false
    $scope.data = [{
        'name' : 'Item 1',
        'color': 'red'
    },
    {
        'name' : 'Item 2',
        'color': 'blue'
    },
    {
        'name' : 'Item 3',
        'color': 'green'
    }]

    $scope.saveItem = function(item) {
        // var index = $scope.data.indexOf(item);
        // $scope.data[index].name = "&#10003;" + item.name
        // console.log(index)
        $scope.binder =  " &#10003; " + item.name;
    }

})

视图

<body ng-app="myApp">
    <div ng-controller="myController">
      <span class="glyphicon glyphicon-star" aria-hidden="true"></span> {{name}}

    <div class="row">
        <div class="col-sm-2" >
             <select class="form-control selectPicker glyphicon" 
                     ng-model="selectedItem"
                     ng-options = "item as item.name for item in data">
            </select>
        </div>
    </div>

    <br> 

    <button type="button"
            class="btn btn-danger"  
            ng-disabled="!selectedItem"     
            ng-click="saveItem(selectedItem)">
            Save
    </button>


    <div ng-bind-html="binder"></div>
</body>

Preview of result

我想要的是......

当前的ng-model'第1项'将被更换/更新，就像活页夹一样（包含勾号）。

此外，我尝试使用ng-repeat执行相同的操作，但是这不是我的选项，因为我需要在整个应用程序中使用对象属性。根据我的理解，使用ng-repeat，似乎所选的值是字符串而不是对象。

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

Answer 1

A）如果您想将Glyphicon添加到选择中，那么这不简单，我可以指出here

B）如果您想添加简单的UTF-8符号，则会在下方显示。

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

因此，在保存项目功能中，您将保存图标/符号值，使其远离您的名字。

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

然后您可以显示您想要的输出，如下所示。

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

之后您的数据将如下所示。

$scope.data = [{ 'name' : 'Item 1', 'color': 'red', 'symbol': '✓' }];

要在选择选项中呈现符号，您需要使用自定义过滤器，如下所示。

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

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

过滤器用于ng-options，如下所示：

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

输出：

以下是一个工作示例：Plunker

使用ng-options将glyphicon图标添加到“已保存”的所选项目中

1 个答案: