Ajouter une icône de glyphicon à un élément sélectionné 'sauvegardé' en utilisant ng-options

Et si nous avons ce scénario ....Ajouter une icône de glyphicon à un élément sélectionné 'sauvegardé' en utilisant ng-options

Une liste déroulante avec 3 éléments. Après avoir sélectionné un élément et cliqué sur le bouton Enregistrer, le modèle ng du menu déroulant est lié à une balise html, de sorte que le ng-model possède maintenant une icône de glyphicon ajoutée avant le nom de l'élément.

J'ai essayé une implémentation de base, mais je n'ai pas réussi à la terminer.

Le modèle

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

})

La vue

<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

Ce que je veux est ce ....

Le modèle ng actuel 'Item 1' doit être remplacé/mis à jour exactement comme le classeur (avec la coche incluse).

En outre, j'ai essayé de faire la même chose en utilisant ng-repeat, mais ce n'est pas une option pour moi car j'ai besoin d'utiliser les propriétés de l'objet dans toute l'application. Avec ng-repeat, d'après ce que je comprends, il semble que la valeur sélectionnée est une chaîne plutôt qu'un objet.

Merci à l'avance pour toute aide ou suggestions :)

Source

2017-09-08 Dylan Busuttil

A) Si vous voulez dire que vous voulez ajouter le Glyphicon à la sélection alors ce n'est pas simple et je peux vous montrer here

B) Si vous voulez ajouter le symbole simple UTF-8, alors ceci est affiché ci-dessous. La meilleure chose à faire serait d'ajouter une nouvelle valeur à votre objet de données pour qu'il contienne l'icône/le symbole dont vous avez besoin afin que vous puissiez l'utiliser au fur et à mesure des besoins. Ainsi, dans votre fonction d'enregistrement, vous enregistrez la valeur de l'icône/du symbole à partir de votre nom.

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

Ensuite, vous pouvez afficher votre sortie comme vous le souhaitez, comme indiqué ci-dessous.

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

Vos données après ressembleront.

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

Pour afficher le symbole dans vos options de sélection, vous devez utiliser un filtre personnalisé comme indiqué ci-dessous.

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

Le filtre prendra la valeur de chaque option et les mettra dans un div qui vous le rendra.

Le filtre est utilisé dans vos ng-options comme indiqué:

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

Sortie:

Voici un exemple de travail: Plunker

Source

2017-09-08 16:06:36 furkick

Ajouter une icône de glyphicon à un élément sélectionné 'sauvegardé' en utilisant ng-options

Répondre

Questions connexes