我有以下几点:

<div>{{modal.title}}</div>

有没有一种方法可以限制字符串的长度,比如20个字符?

一个更好的问题是,有没有一种方法可以将字符串更改为截断并显示。如果超过20个字符?


当前回答

这个解决方案纯粹是在HTML上使用ng标签。

解决方案是使用“show more…”限制显示的长文本。链接。如果用户点击“显示更多…”链接,它将显示其余的文本,并删除了“show more…”的链接。

HTML:

<div ng-init="limitText=160">
   <p>{{ veryLongText | limitTo: limitText }} 
       <a href="javascript:void(0)" 
           ng-hide="veryLongText.length < limitText" 
           ng-click="limitText = veryLongText.length + 1" > show more..
       </a>
   </p>
</div>

其他回答

你可以使用这个npm模块:https://github.com/sparkalow/angular-truncate

将截断过滤器注入到你的应用模块中,如下所示:

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

在你的应用程序中这样应用过滤器:

{{ text | characters:20 }} 

ng-keypress = " filterValue(事件)”ng-model = "客户。CUSTOMER_PHONE”

美元的范围。filterValue = function($event){

        if(isNaN(String.fromCharCode($event.keyCode)) ){
            $event.preventDefault();
        }
        if($scope.customer.CUSTOMER_PHONE.length <= 11)
        {              
            $scope.customer.CUSTOMER_PHONE = $scope.customer.CUSTOMER_PHONE;
        }
        else
        {
            $event.preventDefault();
        }

    };

可以使用筛选器限制字符串或数组的长度。看看AngularJS团队写的这个。

你可以简单地在div中添加一个css类,并通过angularjs添加一个工具提示,这样鼠标移过去时就可以看到修剪后的文本。

< div class = " trim-info“工具提示= " {{modal.title}} > {{modal.title}} < / div > .trim-info { max-width: 50 px; 显示:inline-block; 溢出:隐藏; 文本溢出:省略; 空白:nowrap;} 行高:15 px; 位置:相对; }

我也遇到过类似的问题,我是这样做的:

{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}