angularjs将html编辑器数据限制为某些限制

时间:2018-08-04 07:02:48

标签: angularjs

这是我从Api得到的回应 数据:

<style type="text/css">
<!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->
</style>
<span style="font-size:11pt;font-family:Calibri,Arial;font-style:normal;color:#000000;" 
      data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;http://www.gov.ph/2001/08/11/republic-act-no-9155/\n\n\nhttp://deped.gov.ph/orders/do-13-s-2016\n\n\n\n\n\n\n\nhttp://www.gov.ph/1991/10/10/republic-act-no-7160/&quot;}"
      data-sheets-userformat="{&quot;2&quot;:2112445,&quot;3&quot;:[null,0],&quot;5&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:[null,2,0]},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;6&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:[null,2,0]},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;7&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:[null,2,0]},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;8&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:[null,2,0]},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;10&quot;:1,&quot;11&quot;:4,&quot;12&quot;:0,&quot;14&quot;:[null,2,0],&quot;15&quot;:&quot;Calibri&quot;,&quot;16&quot;:11,&quot;24&quot;:[null,0,3,0,3]}"
>http://www.gov.ph/2001/08/11/republic-act-no-9155/<br>
  <br><br>http://deped.gov.ph/orders/do-13-s-2016<br>
  <br><br><br><br><br><br>
  <br>http://www.gov.ph/1991/10/10/republic-act-no-7160/
</span>"

以上全部是我从api中获得的数据

所以我只想显示300个字符... 用于显示或多或少的功能

请帮助 预先感谢

1 个答案:

答案 0 :(得分:0)

尝试一下。

您的HTML

    <div ng-app="yourAppName">
        <div ng-controller="YourControllerName">
            <p ng-show="showLink">{{lngStr|limitTo:300}}
                <a href="" ng-click="showMore()">show more</a>
            </p>
            <p ng-hide="showLink">{{lngStr}}
                <a href="" ng-click="showMore()">hide</a>
            </p>
        </div>
  </div>

您的控制器

angular.module("yourAppName", ["your", "dependencies"])
.controller("YourControllerName", function ($scope) {
    $scope.lngStr = the_Very_Long_String_You_Retrieve_From_Your_Api;
    $scope.showLink = true; // Set the showLink to show onLoad
    $scope.showMore = function () {
        $scope.showLink = !$scope.showLink;
    }
})

当我拥有更好的互联网连接时,我会将其编辑为一个插件。