Question

通过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>

在limitTo过滤之前，一切都按预期进行：

<span>John Doe</span>
<span>Hey, how are you? ☺</span>

但是，当我尝试应用limitTo过滤器时，出现问题：

<span>John Doe</span>
<span>Hey, how are you? �</span>

我做错了什么？有什么想法吗？

以下是演示应用：

var app = angular.module('myApp', []);

app.filter('range', function () {
  return function(input, total) {
    total = parseInt(total);

    for (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 are 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>

Answer 1

如果您尝试在http://www.charactercountonline.com中获取单个表情符号的字符长度，那么它将显示正常表情符号的2个字符和小表情符号中的1个字符。因此，因为使用限制，错过了一个字符所以它显示一个问号标记。

Answer 2

var app = angular.module('myApp', []);

app.filter('range', function () {
  return function(input, total) {
    total = parseInt(total);

    for (var i=0; i<total; i++) {
      input.push(i);
    }

    return input;
  };
});

app.controller('DemoController', ['$scope', function ($scope) {
  $scope.setLimit = function(i){
    $scope.limit = 20+i; 
  }
   $scope.comment = {
      Author: "John Doe",
      Description: "Hey, how are 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="setLimit(i)">
        <div ng-bind="comment.Author"></div>
        <span ng-bind="comment.Description | limitTo: limit"></span> (<span ng-bind="limit"></span>)
      </li>
    </ul>
  </div>
</div>

当我在AngularJS应用程序中使用“limitTo”过滤器后，会出现菱形问号字符

2 个答案: