需求大致如图所示，由于本人也是新接触AngularJS，研究好久，制作了一个demo,代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"/> -->
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<div ng-repeat="x in names">

<div ng-if="x.name.length > 5 && x.flag" ng-click="show(x)">{{ x.shortname}}&nbsp;&nbsp;<span style="color:red">&gt;</span></div>
<div ng-if="x.name.length > 5 && !x.flag" ng-click="hide(x)">{{ x.name}}&nbsp;&nbsp;<span style="color:red">&lt;</span></div>
<div ng-if="x.name.length <= 5">{{ x.name}}</div>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'我有一头小毛驴我从来也不骑'},
{name:'有一天我高高兴兴骑着它去赶集'},
{name:'我手里拿着小皮鞭心里正得意'}
];
for(var i=0;i<$scope.names.length;i++){
$scope.names[i].shortname= $scope.names[i].name.substring(0,5);
}
$scope.show = function(x){
x.flag = false;
}
$scope.hide = function(x){
x.flag = true;
}

});
</script>

</body>
</html>

AngularJS的文字溢出处理的更多相关文章

  1. CSS 文本和表格中文字溢出显示省略号

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  2. jquery文字溢出处理，超出变省略号

    //文字溢出 $(function(){ $(".d_dt a").each(function(){ var maxwidth =100; if($(this).text().le ...

  3. css+div如何解决文字溢出

    看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...

  4. IE6文字溢出BUG(多出来的猪问题)

    在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来. 看个例子: HTML & ...

  5. CSS 文字溢出时的自动隐藏

    http://www.111cn.net/cssdiv/css/34050.htm 语法:overflow : visible | auto | hidden | scroll visible::不剪 ...

  6. 【IE6的疯狂之四】IE6文字溢出BUG

    在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来. 看个例子: XML/HT ...

  7. CSS文字溢出处理问题

    单行省略 div { white-space:nowrap; //断行处理:无断行 text-overflow:ellipsis; //文字溢出处理:省略号 overflow:hidden; //溢出 ...

  8. html中文字溢出处理（text-overflow）

    文字溢出处理有两种方式: 一.css overflow:hidden;            white-space: nowrap;            text-overflow: ellips ...

  9. CSS文字溢出部分自动用"..."代替

    CSS文字溢出部分自动用"..."代替 如html部分: <h4><马尔代夫双鱼岛Olhuveli4 晚6 日自助游></h4> <p&g ...

随机推荐

  1. Scraping_regex

    上面链接爬虫只是能将我们所需的网页下载下来,但是,我们没办法得到我们想要的数据.因此,我们只有URL管理器和URL下载器是不足以组成一个完整的网络爬虫的.我们还需要URL解析器,对数据进行提取. 数据 ...

  2. N维法向量与N维超平面的关系的简单证明（日志二）

    虽然按照上面的方式证明出来,但感觉之中,似乎依旧是不严密的, 如下: 如果直线是2x+2y+1=0 那么(-1,1)也是其平行向量 ,.那么(1,1)依旧是法向量 此时,直线经过(0,-1/2)这个点 ...

  3. JS中this到底指向谁？

    关于this的指向,是一个令人很头疼的问题.但是,你运气好,碰到了我.老夫这儿有本祖传秘籍,看懂这个,妈妈再也不用担心你的this指向不对啦! 归根结底,this指向就一句话:谁最终调用函数,this ...

  4. MySQL的SELECT ...for update

    最近的项目中,因为涉及到Mysql数据中乐观锁和悲观锁的使用,所以结合项目和网上的知识点对乐观锁和悲观锁的知识进行总结. 悲观锁介绍 悲观锁是对数据被的修改持悲观态度(认为数据在被修改的时候一定会存在 ...

  5. 基于OWIN+DotNetOpenOAuth实现OAuth2.0

    这几天时间一直在研究怎么实现自己的OAuth2服务器,对于太了解OAuth原理以及想自己从零开始实现的,我建议可以参考<Apress.Pro ASP.NET Web API Security&g ...

  6. Adobe Fireworks CS6 Mac破解版

    Mac下一款快速建站的软件--Adobe Fireworks CS6,小子这里有时间就分享出来给更多需要的朋友. Adobe Fireworks CS6能让您在弹指间创作精美的网站和移动应用程序设计, ...

  7. 企业账号打包如何通过HTML页面打开

    企业账号打包后 Plist文件加入前缀 href="itms-services://?action=download-manifest&url= Plist文件在服务器中的地址为:h ...

  8. 【转】jQuery Validate验证框架详解

    jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...

  9. java 上传2（使用java组件fileupload和uploadify）

    项目关键包和插件

  10. struts2.1.6教程六、使用标签

    1.基础表单标签 准备工作:建立struts2tag项目,搭建好struts2的开发环境.在html我们常用的基础表单标签主要有文本域.密码域.提交.重置四种.它们在strust2中可以通过标签来生成 ...