2016-07-28 10 views
1

APIを使用してコメント(絵文字付き)を読み込む際に問題が発生します。AngularJSアプリで「limitTo」フィルタを使用すると、ダイヤモンドの形の疑問符文字が表示される

<!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>

答えて

-1

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>

+0

これはなんですか? o_O –

0

あなたはhttp://www.charactercountonline.comで、単一の絵文字の文字の長さを取得しようとする場合、それがされます:ここでは

はデモアプリです通常の絵文字には2文字、小さな絵文字には1文字を表示します。限界を使うので、1文字が欠けているので、疑問符記号が表示されます。

関連する問題