Question

我正在做一个应用程序来显示WordPress帐户中的帖子，但是其中一些帖子太长了，所以我需要限制显示的字符数量，只允许说300个字符并实现一个按钮＆＃34;阅读更多...＆＃34;

有任何棱角分明的方式吗？

或

我怎样才能做到这一点？

angular.module('urbanet.app.service', [])

.service('FreshlyPressed', function($http) {
  return {
    getBlogs: function($scope) {
      $http.jsonp('https://public-api.wordpress.com/rest/v1.1/freshly-pressed?callback=JSON_CALLBACK')
        .success(function(result) {
          $scope.posts = result.posts;
        });
    }
  }
})

.controller('NewsCtrl', function($scope, $log, FreshlyPressed) {
  $scope.posts = [];
  $scope.doRefresh = function() {

    FreshlyPressed.getBlogs($scope);
    console.log('PRESSED');

  }
  $scope.doRefresh();
});

我正在使用的代码。

Answer 1

如果是简单文字，您可以创建过滤器吗？

module.filter('CutText', function() {
    return function (text, maxlength){
        return text.length > maxlength ? text.substr(0, maxlength) + "..." : text;
    };
});
//<div ng-bind="scope_variable | CutText:300"></div>

但是，如果你想得到你提到的内容，你可以创建一个添加按钮元素的指令＆＃34;阅读更多...＆＃34;

<强>指令：

module.directive('moreLess', ["$compile", function($compile){
    return {
        link: function(scope, element, attrs) {
            var text = element.text(), max = +attrs.moreLess, button, more;

            scope.show = false;

            if(text.length > max){

                button = angular.element("<a/>").attr({"ng-click": "show = !show", "href": "#"});
                more = angular.element("<span />").attr("ng-show", "show").text(text.substr(max));

                element.text(text.substr(0, max)).append(more).append(button);

                var newScope = scope.$new();

                $compile(element.contents())(newScope);

                newScope.$watch("show", function(show){
                    button.text(!show ? "more..." : "less");
                });
            }

        }
    };
}]);
//
//HTML <div more-less="32">Big Text..........</div>

演示：http://plnkr.co/edit/2Ts4URPsysZtaG84YoZA?p=preview

Answer 2

所以基本上像

<div ng-repeat="post in posts>
    <h1>{{ post.title }}</h1>
    {{ post.text | limitTo: 300 }}
    <button ng-click="viewPost(post.id)">
        Read More
    </button>
</div>

是吗？

Answer 3

codepen

使用指令更新了我的答案，但是codepen正在进行维护。我明天会试着保存它。

Void

<!-- html -->
<div ng-repeat="post in posts">
  <div id="{{$index}}" limit="{{limit}}"></div>
</div>

Answer 4

wordpress已经为您提供了excerpt属性，该属性是帖子的缩写....通常由wordpress管理设置中的字数设置。

此属性存在于相关示例网址

中

您需要的所有内容＆＃34;了解更多＆＃34;链接到完整帖子

我该怎么做才能限制字符数量？

4 个答案: