如何在angularjs中显示表情符号unicode charecters？

时间：2015-12-29 08:57:49

标签： html angularjs unicode emoji

我有JSON中的表情符号unicode列表，角度绑定没有显示&#x{{emoji.unicode}}; html中的unicode作为符号

(function() {
  var app = angular.module('tableApp', []);
  app.controller('tableController', function($scope) {
    $scope.emojis = [{
      "unicode": "1f600",
      "unicode_alternates": "",
      "name": "grinning face",
      "shortname": ":grinning:",
      "category": "people",
      "emoji_order": "1",
      "aliases": [],
      "aliases_ascii": [],
      "keywords": ["happy", "joy", "smile", "grin", "smiling", "smiley", "person"]
    }, {
      "unicode": "1f62c",
      "unicode_alternates": "",
      "name": "grimacing face",
      "shortname": ":grimacing:",
      "category": "people",
      "emoji_order": "2",
      "aliases": [],
      "aliases_ascii": [],
      "keywords": ["teeth", "grimace", "disapprove", "pain", "person"]
    }, {
      "unicode": "1f601",
      "unicode_alternates": "",
      "name": "grinning face with smiling eyes",
      "shortname": ":grin:",
      "category": "people",
      "emoji_order": "3",
      "aliases": [],
      "aliases_ascii": [],
      "keywords": ["happy", "joy", "smile", "grin", "smiley", "eye", "person"]
    }, {
      "unicode": "1f602",
      "unicode_alternates": "",
      "name": "face with tears of joy",
      "shortname": ":joy:",
      "category": "people",
      "emoji_order": "4",
      "aliases": [],
      "aliases_ascii": [":')", ":'-)"],
      "keywords": ["cry", "haha", "happy", "weep", "person", "tear"]
    }, {
      "unicode": "1f603",
      "unicode_alternates": "",
      "name": "smiling face with open mouth",
      "shortname": ":smiley:",
      "category": "people",
      "emoji_order": "5",
      "aliases": [],
      "aliases_ascii": [":D", ":-D", "=D"],
      "keywords": ["haha", "happy", "joy", "smile", "smiley", "person"]
    }, {
      "unicode": "1f604",
      "unicode_alternates": "",
      "name": "smiling face with open mouth and smiling eyes",
      "shortname": ":smile:",
      "category": "people",
      "emoji_order": "6",
      "aliases": [],
      "aliases_ascii": [":)", ":-)", "=]", "=)", ":]"],
      "keywords": ["funny", "haha", "happy", "joy", "laugh", "smile", "smiley", "eye", "person"]
    }, {
      "unicode": "1f605",
      "unicode_alternates": "",
      "name": "smiling face with open mouth and cold sweat",
      "shortname": ":sweat_smile:",
      "category": "people",
      "emoji_order": "7",
      "aliases": [],
      "aliases_ascii": ["':)", "':-)", "'=)", "':D", "':-D", "'=D"],
      "keywords": ["happy", "hot", "perspiration", "smile", "person"]
    }, {
      "unicode": "1f606",
      "unicode_alternates": "",
      "name": "smiling face with open mouth and tightly-closed eyes",
      "shortname": ":laughing:",
      "category": "people",
      "emoji_order": "8",
      "aliases": [":satisfied:"],
      "aliases_ascii": [">:)", ">;)", ">:-)", ">=)"],
      "keywords": ["happy", "joy", "lol", "laughing", "laugh", "person", "satisfied", "smile"]
    }, {
      "unicode": "1f607",
      "unicode_alternates": "",
      "name": "smiling face with halo",
      "shortname": ":innocent:",
      "category": "people",
      "emoji_order": "9",
      "aliases": [],
      "aliases_ascii": ["O:-)", "0:-3", "0:3", "0:-)", "0:)", "0;^)", "O:)", "O;-)", "O=)", "0;-)", "O:-3", "O:3"],
      "keywords": ["angel", "innocent", "ring", "circle", "heaven", "fairy tale", "fantasy", "person", "smile"]
    }, {
      "unicode": "1f609",
      "unicode_alternates": "",
      "name": "winking face",
      "shortname": ":wink:",
      "category": "people",
      "emoji_order": "10",
      "aliases": [],
      "aliases_ascii": [";)", ";-)", "*-)", "*)", ";-]", ";]", ";D", ";^)"],
      "keywords": ["happy", "mischievous", "secret", "wink", "friendly", "joke", "person"]
    }];
  });

})();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="tableApp">
  <table class="table table-striped table-hover" ng-controller="tableController">
    <thead>
      <tr>
        <th>Total emojis name</th>
        <th>Emoji</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="emoji in emojis">
        <td>{{emoji.name}}</td>
        <td>&#x{{emoji.unicode}};</td>
        <!-- <td ng-bind-html="emoji.unicode"></td> -->
      </tr>
    </tbody>
  </table>
</div>

1 个答案:

答案 0 :(得分：0)

表情符号可以显示trustAsHtml()。在这里我们可以使用过滤器。

.filter('exposeEmoji', function($sce) {
    return function(val) {
        val = "&#x"+ val + ";";
        return $sce.trustAsHtml(val);
    };
});


(function() {
  var app = angular.module('tableApp', []);
  app.controller('tableController', function($scope) {
    $scope.emojis = [{
      "unicode": "1f600",
      "unicode_alternates": "",
      "name": "grinning face",
      "shortname": ":grinning:",
      "category": "people",
      "emoji_order": "1",
      "aliases": [],
      "aliases_ascii": [],
      "keywords": ["happy", "joy", "smile", "grin", "smiling", "smiley", "person"]
    }, {
      "unicode": "1f62c",
      "unicode_alternates": "",
      "name": "grimacing face",
      "shortname": ":grimacing:",
      "category": "people",
      "emoji_order": "2",
      "aliases": [],
      "aliases_ascii": [],
      "keywords": ["teeth", "grimace", "disapprove", "pain", "person"]
    }, {
      "unicode": "1f601",
      "unicode_alternates": "",
      "name": "grinning face with smiling eyes",
      "shortname": ":grin:",
      "category": "people",
      "emoji_order": "3",
      "aliases": [],
      "aliases_ascii": [],
      "keywords": ["happy", "joy", "smile", "grin", "smiley", "eye", "person"]
    }, {
      "unicode": "1f602",
      "unicode_alternates": "",
      "name": "face with tears of joy",
      "shortname": ":joy:",
      "category": "people",
      "emoji_order": "4",
      "aliases": [],
      "aliases_ascii": [":')", ":'-)"],
      "keywords": ["cry", "haha", "happy", "weep", "person", "tear"]
    }, {
      "unicode": "1f603",
      "unicode_alternates": "",
      "name": "smiling face with open mouth",
      "shortname": ":smiley:",
      "category": "people",
      "emoji_order": "5",
      "aliases": [],
      "aliases_ascii": [":D", ":-D", "=D"],
      "keywords": ["haha", "happy", "joy", "smile", "smiley", "person"]
    }, {
      "unicode": "1f604",
      "unicode_alternates": "",
      "name": "smiling face with open mouth and smiling eyes",
      "shortname": ":smile:",
      "category": "people",
      "emoji_order": "6",
      "aliases": [],
      "aliases_ascii": [":)", ":-)", "=]", "=)", ":]"],
      "keywords": ["funny", "haha", "happy", "joy", "laugh", "smile", "smiley", "eye", "person"]
    }, {
      "unicode": "1f605",
      "unicode_alternates": "",
      "name": "smiling face with open mouth and cold sweat",
      "shortname": ":sweat_smile:",
      "category": "people",
      "emoji_order": "7",
      "aliases": [],
      "aliases_ascii": ["':)", "':-)", "'=)", "':D", "':-D", "'=D"],
      "keywords": ["happy", "hot", "perspiration", "smile", "person"]
    }, {
      "unicode": "1f606",
      "unicode_alternates": "",
      "name": "smiling face with open mouth and tightly-closed eyes",
      "shortname": ":laughing:",
      "category": "people",
      "emoji_order": "8",
      "aliases": [":satisfied:"],
      "aliases_ascii": [">:)", ">;)", ">:-)", ">=)"],
      "keywords": ["happy", "joy", "lol", "laughing", "laugh", "person", "satisfied", "smile"]
    }, {
      "unicode": "1f607",
      "unicode_alternates": "",
      "name": "smiling face with halo",
      "shortname": ":innocent:",
      "category": "people",
      "emoji_order": "9",
      "aliases": [],
      "aliases_ascii": ["O:-)", "0:-3", "0:3", "0:-)", "0:)", "0;^)", "O:)", "O;-)", "O=)", "0;-)", "O:-3", "O:3"],
      "keywords": ["angel", "innocent", "ring", "circle", "heaven", "fairy tale", "fantasy", "person", "smile"]
    }, {
      "unicode": "1f609",
      "unicode_alternates": "",
      "name": "winking face",
      "shortname": ":wink:",
      "category": "people",
      "emoji_order": "10",
      "aliases": [],
      "aliases_ascii": [";)", ";-)", "*-)", "*)", ";-]", ";]", ";D", ";^)"],
      "keywords": ["happy", "mischievous", "secret", "wink", "friendly", "joke", "person"]
    }];
  })
.filter('exposeEmoji', function($sce) {
    return function(val) {
    		val = "&#x"+ val + ";";
        return $sce.trustAsHtml(val);
    };
});





})();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="tableApp">
  <table class="table table-striped table-hover" ng-controller="tableController">
    <thead>
      <tr>
        <th>Total emojis name</th>
        <th>Emoji</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="emoji in emojis">
        <td>{{emoji.name}}</td>
        <td ng-bind-html="emoji.unicode | exposeEmoji"></td>
      </tr>
    </tbody>
  </table>
</div>

相关问题
最新问题