AngularJS，在 x 个字符后创建 "more.." 标签

Question

是否可以在 Angular 中创建一个 "more.." 标签，如果字符串显示超过 100 个字符（例如），该标签就会出现？当您按下 link 时，它将显示其余字符。

我一直在努力寻找一个例子，但没有成功。

提前致谢。

编辑：-- 工作！

我添加了 Don 的解决方案。

这是我的bundle/angularjs:

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

这是我的bundle/myapp:

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

这是我的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>

这是我的 js 文件：

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

指令非常适合您的问题：

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>

从 here 窃取的截断文本功能。

AngularJS，在 x 个字符后创建 "more.." 标签

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

tags

hyperlink

angularjs