CODEWITHSUNDEEP
angularjsng-options
Dylan Busuttil
Dylan Busuttil

Reputation: 46

Add glyphicon icon to a 'saved' selected item using ng-options

What if we have this scenario ....

A dropdown with 3 elements. Upon selecting an item and clicking the save button, the ng-model from the dropdown menu is binded with an html tag so that the ng-model now has a glyphicon icon appended before the item name.

I have tried a basic implementation, however I was not able to complete it.

The Model

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 = "✓" + item.name
        // console.log(index)
        $scope.binder =  " ✓ " + item.name;
    }

})

The View

<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

What I want is this ....

The current ng-model 'Item 1' is to be replaced/updated exactly like the binder (With the tick included).

Furthermore, I tried to do the same thing using ng-repeat, however this is not an option for me as I need to use the object properties throughout the whole application. With ng-repeat, from my understanding, it seems that the selected value is a string rather than an object.

Thanks in advance for any help or suggestions :)

Upvotes: 2

Views: 1293

Answers (1)

furkick
furkick

Reputation: 423

A) If you mean you want to add the Glyphicon to the select then this isn't simple and I can point you here

B) If you want to add the simple UTF-8 symbol then this is shown below.

The most efficient thing to do would be to add a new value to your data object to hold the icon/symbol you require so you can use this as and when required.

So in your save item function you are saving the icon/symbol value away from your name. 

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

Then you can display your output however you wish such as shown below. 

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

Your data afterwards will look like.

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

To render the symbol in your select options you will need to use a custom filter as shown below.

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

The filter will take the value of each option and put them in a div which will render the symbol for you.

The filter is used in your ng-options as shown:

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

Output:

enter image description here

Here is a working example: Plunker

Upvotes: 1

Related Questions