如何在离子应用程序中使用“emojione”

Question

在我的离子应用程序中，我想使用emojione作为笑脸聊天。不幸的是，我没有找到有用的文档来展示如何使用emojione。

现在我想创建一个包含笑脸和它相关组的所有列表的弹出框。 像这样：

在下载文件，有笑脸的PNG精灵，它的CSS文件，但没有任何HTML文件显示笑脸名单。

如何创建此列表？

Answer 1

经过两天的研究，我没有在互联网上找到任何答案，所以我自己编写了列表（包含所有与它的类别的表情符号）并解决问题。

在下载的文件夹在emojione.com，有一些文件，我用来创建列表：

1 emojione.sprites.css包含background-position和classname

2. emojione.sprites。 PNG这是所有的表情符号的精灵形象

3 emoji.json比包含所有的表情符号名称，类别，Unicode和...

我用ionic tab和角ng-repeat和在groupBy滤波器angular-filter

角滤波器：一束有用的过滤器为AngularJS

重要：使用unicode在emoji.json每个表情符号classname以显示表情元素background（恶意）。

HTML

<div class="emoji-wrapper"> 

    <div class="tabs"> 
     <a ng-repeat="(key, value) in emojies | groupBy:'category'" class="tab-item" ng-click="changeTab($index)"> 
      {{key}} 
     </a> 
    </div> 

    <div ng-repeat="(key, value) in emojies | groupBy:'category'" id="{{key}}" ng-show="tabActive[$index]"> 
     <ul> 
      <li ng-repeat="emoji in value"> 
       <span class="emojione emojione-{{emoji.unicode}}"></span> 
      </li> 
     </ul> 
    </div> 

</div> 

JS

$scope.emojies = []; 
$scope.tabActive = []; 
$scope.tabActive[0] = true; 

$http.get("emoji.json").then(function (response) { 

    angular.forEach(response.data , function ($elem , $index) { 
     $scope.emojies.push($elem); 
    }); 

}); 

$scope.changeTab = function (index) { 
    $scope.tabActive = []; 
    $scope.tabActive[index] = true; 
};