html - Diamond shaped question mark character appears after when I use "limitTo" filter in AngularJS app -
i have issue while loading comments (with emoji) via api.
<!doctype html> <html ng-app="app"> <head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src="./angular-1.2.15.js"></script> <!-- ... --> </head> <body> <!-- ... --> <ul> <li ng-repeat="comment in comments"> <span ng-bind="comment.author"></span> <span ng-bind="comment.description"></span> </li> </ul> <!-- ... --> <script> angular.module('app', []); // ... </script> </body> </html> before limitto filter goes expected:
<span>john doe</span> <span>hey, how you? 😃😄😅😆😉😊😋😎😍😘😗😙😚☺😇😐😑😆😶😏😣😥😮😯😪😫😴😌😛😜😝😒😓😔😕😲😷😖😞😟</span> but, when try apply limitto filter, goes wrong:
<span>john doe</span> <span>hey, how you? 😃😄�</span> what doing wrong? ideas?
here demo app:
var app = angular.module('myapp', []); app.filter('range', function () { return function(input, total) { total = parseint(total); (var i=0; i<total; i++) { input.push(i); } return input; }; }); app.controller('democontroller', ['$scope', function ($scope) { $scope.comment = { author: "john doe", description: "hey, how you? 😃😄😅😆😉😊😋😎😍😘😗😙😚☺😇😐😑😆😶😏😣😥😮😯😪😫😴😌😛😜😝😒😓😔😕😲😷😖😞😟" }; }]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <div ng-app="myapp"> <div ng-controller="democontroller"> <ul> <li ng-repeat="i in [] | range:78" ng-init="limit = 20+i"> <div ng-bind="comment.author"></div> <span ng-bind="comment.description | limitto: limit"></span> (<span ng-bind="limit"></span>) </li> </ul> </div> </div>
if try length of characters of single emoji in http://www.charactercountonline.com show 2 characters normal emoji , 1 character in small emoji. because using limit, 1 character missed show question mark sign.
Comments
Post a Comment