Javascript 我应该如何限制字符的数量？

我正在做一个应用程序来显示来自WordPress帐户的帖子，但是其中一些帖子太长了，所以我需要限制只显示300个字符，并实现一个按钮“阅读更多…”

有什么办法吗

或

我怎样才能做到这一点

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();
});

---

这是我正在使用的代码。

您可以像使用角度阵列一样使用

limito

过滤器

<p>
   <span ng-if="showall">{{postbody}}</span>
   <span ng-if="!showall">{{postbody | limitTo:300}}</span>
   <div ng-if="postbody.length > 300" ng-click="showall = !showall">read more...</div>
</p>

{{postbody}}
{{postbody | limito:300}}
阅读更多。。。

您可以使用

limito

过滤器，就像使用角度阵列一样

<p>
   <span ng-if="showall">{{postbody}}</span>
   <span ng-if="!showall">{{postbody | limitTo:300}}</span>
   <div ng-if="postbody.length > 300" ng-click="showall = !showall">read more...</div>
</p>

{{postbody}}
{{postbody | limito:300}}
阅读更多。。。

如果它是一个简单的文本，您可以创建一个过滤器吗

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>

module.filter（'cutext'，function（）{
返回函数（文本，最大长度）{
返回text.length>maxlength？text.substr（0，maxlength）+“…”：文本；
};
});
//

但是，如果您想得到您提到的内容，可以创建一个指令，添加一个按钮元素“ReadMore…”

指令：

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>

module.directive（'moreLess'，[“$compile”，函数（$compile）{
返回{
链接：函数（范围、元素、属性）{
var text=element.text（），max=+attrs.moreLess，button，more；
scope.show=false；
如果（text.length>max）{
button=angular.element（“
如果它是一个简单的文本，您可以创建一个过滤器吗

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>

module.filter（'cutext'，function（）{
返回函数（文本，最大长度）{
返回text.length>maxlength？text.substr（0，maxlength）+“…”：文本；
};
});
//

但是，如果您想得到您提到的内容，可以创建一个指令，添加一个按钮元素“ReadMore…”

指令：

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>

module.directive（'moreLess'，[“$compile”，函数（$compile）{
返回{
链接：函数（范围、元素、属性）{
var text=element.text（），max=+attrs.moreLess，button，more；
scope.show=false；
如果（text.length>max）{
button=angular.element（“
基本上类似于

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

所以基本上

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


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

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




//module.directive
函数极限（）{
返回{
限制：“A”
，替换：false
，链接：功能（范围、元素、属性）{
var postText
，buttonText='阅读更多'
，limit=+attrs.limit
，span=角度。元素（“”）
，按钮=
角元素（“”）
.on（'单击'，函数（）{
极限=极限<无穷大
无穷
：+attrs.limit
buttonText=极限<无穷大
“阅读更多”
：“结束”
元素init（）
})
elem.init=函数（）{
postText=scope.posts[attrs.id].text.substr（0，限制）
按钮文本（buttonText）
元素追加（span）.text（postText）.append（按钮）
}
元素init（）
}
}
}

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

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




//module.directive
函数极限（）{
返回{
限制：“A”
，替换：false
，链接：功能（范围、元素、属性）{
var postText
，buttonText='阅读更多'
，limit=+attrs.limit
，span=角度。元素（“”）
，按钮=
角元素（“”）
.on（'单击'，函数（）{
极限=极限<无穷大
无穷
：+attrs.limit
buttonText=极限<无穷大
“阅读更多”
：“结束”
元素init（）
})
elem.init=函数（）{
postText=scope.posts[attrs.id].text.substr（0，限制）
按钮文本（buttonText）
元素追加（span）.text（postText）.append（按钮）
}
元素init（）
}
}
}
wordpress已经为您提供了一个
摘录
属性，它是文章的缩写…通常由wordpress管理设置中的字数设置

此属性存在于相关的示例url中

“阅读更多”所需的只是指向全文的链接，wordpress已经为您提供了一个
摘录
属性，它是文章的缩写…通常由wordpress管理设置中的字数设置

此属性存在于相关的示例url中

“阅读更多”所需的一切链接到完整帖子
的数据是否已经包含帖子的摘录属性？在自托管wordpress上，这是REST API输出的一部分？在自托管wordpress上，数据是否已经包含帖子的摘录属性？在自托管wordpress上，这是REST API输出的一部分，不是非常优雅，但它可以工作。最好打包在对于一个指令来说，这也有点取决于OP在点击按钮时打算如何显示帖子。这是绝对的。然而，问题似乎只是关于如何限制文本正文，所以我包含了我的答案。当然，添加一层抽象会使它更具可移植性。不是非常优雅，但它可以工作。如果是int，它会更好o指令，也有点取决于OP在点击按钮时打算如何显示帖子。当然。然而，问题似乎只是关于如何限制正文，所以我包含了我的答案。当然，添加一层抽象会使它更便于移植。很酷，我在写指令，但采取了一点不同的做法我更喜欢你的方法，但是
$compile（element.contents（））（scope）；
崩溃了codepenEdited。我改变了