Что мне делать, чтобы ограничить количество символов?

Question

Я делаю приложение, чтобы отображать сообщения из учетной записи 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(); 
}); 

есть код, который я использую.

Answer 1

codepen

Обновлено мой ответ с директивой, но codepen делает техническое обслуживание. Я постараюсь спасти его завтра.

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

 

// module.directive 
function limit() { 
    return { 
    restrict: 'A' 
    , replace: false 
    , link: function (scope, elem, attrs) { 
     var postText 
     , buttonText = 'Read More' 
     , limit = +attrs.limit 
     , span = angular.element('<span/>') 
     , button = 
      angular.element('<button/>') 
       .on('click', function() { 
       limit = limit < Infinity 
        ? Infinity 
        : +attrs.limit 

       buttonText = limit < Infinity 
        ? 'Read More' 
        : 'Close' 

       elem.init() 
       }) 

     elem.init = function() { 
     postText = scope.posts[attrs.id].text.substr(0, limit) 
     button.text(buttonText) 
     elem.append(span).text(postText).append(button) 
     } 
     elem.init() 
    } 
    } 
} 

Answer 2

Вы можете использовать limitTo фильтр, как вы бы с массивом в угловом

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

Answer 3

Если это простой текст, вы можете создать фильтр?

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.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 4

В основном что-то вроде

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

WordPress уже предоставляет вам excerpt имущество, которое является сокращением от должности .... обычно устанавливается на количество слов в настройках WordPress администратора.

Это свойство существует в образце URL в вопросе

Все, что вам потребуется для «читать далее» Ссылка на полный пост