AngularJS, Create "more.." tag after x-numbers of characters

Question

Is it possible to create a "more.." tag in Angular which will appear if a string shows more than 100 characters (for example)? When you push the link it will show the rest of the characters.

I have been trying to find an example but without any luck.

Thanks in advance.

Edit: -- WORKING!

I have added Don's solution.

This is my bundle/angularjs:

"~/Scripts/angular.js",
"~/Scripts/angular-*",
"~/Scripts/angular.min.js",
"~/Scripts/ng-sortable.js",));

This is my bundle/myapp:

"~/Scripts/EventIndexAngularController.js"));

This is my index.cshtml:

@model IEnumerable<Nybroe.FightPlan.Sql.Model.EventRecord>
@section scripts {
@Scripts.Render("~/bundles/angularjs")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/myapp")
}
@{
ViewBag.Title = "Index";
}

<div class="row">
<hr />
<div ng-app="myApp" ng-controller="MyCtrl">
    @foreach (var item2 in Model)
    {
        <div class="col-md-2 index-box">
                <b>@Html.DisplayNameFor(model => model.Details)</b><br />
                <p expand-text="100">@Html.DisplayFor(modelItem => item2.Details)</p>
                <b>@Html.DisplayNameFor(model => model.Location)</b><br />
                <p>@Html.DisplayFor(modelItem => item2.Location)</p>
            </div>
    }
    </div>
</div>

And this is my js file:

var myApp = angular.module('myApp',[]);

myApp.directive('expandText', function() {
return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
        var text = elem.context.innerText;
        elem.context.innerText = trunc(attrs.expandText, text, true);
        elem.append('<span ng-click="expand();"> more...</span>');

        elem.on('click', function() {
            elem.context.innerText = text;
        });

        function trunc(n, text, useWordBoundary) {
            var toLong = text.length > n,
              s_ = toLong ? text.substr(0, n-1) : text;
            s_ = useWordBoundary && toLong ? s_.substr(0, s_.lastIndexOf(' ')) : s_;
            return s_;
        }
    }
}
});

function MyCtrl($scope) {
}

Answer 1

A directive would be perfect for your problem:

var myApp = angular.module('myApp',[]);

myApp.directive('expandText', function() {
  return {
    restrict: 'A',
 link: function(scope, elem, attrs) {
      var text = elem.context.innerText;
      elem.context.innerText = trunc(attrs.expandText, text, true);
      elem.append('<span ng-click="expand();"> more...</span>');
      
      elem.on('click', function() {
        elem.context.innerText = text;
      });
      
      function trunc(n, text, useWordBoundary) {
        var toLong = text.length > n,
          s_ = toLong ? text.substr(0, n-1) : text;
        s_ = useWordBoundary && toLong ? s_.substr(0, s_.lastIndexOf(' ')) : s_;
        return s_;
      }
    }
  }
});

function MyCtrl($scope) {
}

span {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  <p expand-text="100">
    Bacon ipsum dolor amet biltong shoulder swine sirloin doner corned beef bacon ribeye. Spare ribs beef ribs chuck brisket, shank picanha filet mignon hamburger ham capicola. Landjaeger tenderloin flank, ham hock shank leberkas picanha biltong capicola t-bone. Bacon salami filet mignon tail ball tip. Chicken pork loin salami shankle, sausage ham hock beef capicola boudin short loin venison sirloin. Kielbasa shank drumstick, filet mignon porchetta capicola pork chuck pastrami turkey pork belly ball tip alcatra pancetta brisket.

Pork pork chop salami swine corned beef chuck, short loin ground round bresaola shoulder. Short ribs pork bresaola, meatball alcatra tri-tip short loin. Frankfurter capicola tenderloin prosciutto t-bone corned beef flank meatloaf kielbasa salami. Cow jerky turkey, pork belly strip steak cupim frankfurter porchetta.

Corned beef pork loin andouille, rump doner chicken tri-tip meatloaf meatball pig. Meatloaf ham hock biltong, chuck bacon prosciutto meatball corned beef pork belly. Hamburger prosciutto jowl shank, frankfurter ham hock pork belly cupim brisket t-bone. Meatball chicken salami drumstick, flank pig short loin chuck landjaeger rump pork chop porchetta. Ball tip pork loin rump hamburger salami turducken sirloin tongue tenderloin bacon spare ribs pork chop. Ham ball tip pastrami biltong short ribs turducken strip steak flank jerky meatloaf boudin. Prosciutto landjaeger capicola, venison beef ribs shank pancetta meatball swine chuck short ribs jowl
  </p>
</div>

Truncating text function stolen from here.