AngularJS的文字溢出处理
需求大致如图所示，由于本人也是新接触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}} <span style="color:red">></span></div>
<div ng-if="x.name.length > 5 && !x.flag" ng-click="hide(x)">{{ x.name}} <span style="color:red"><</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的文字溢出处理的更多相关文章
- CSS 文本和表格中文字溢出显示省略号
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- jquery文字溢出处理，超出变省略号
//文字溢出 $(function(){ $(".d_dt a").each(function(){ var maxwidth =100; if($(this).text().le ...
- css+div如何解决文字溢出
看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...
- IE6文字溢出BUG(多出来的猪问题)
在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来. 看个例子: HTML & ...
- CSS 文字溢出时的自动隐藏
http://www.111cn.net/cssdiv/css/34050.htm 语法:overflow : visible | auto | hidden | scroll visible::不剪 ...
- 【IE6的疯狂之四】IE6文字溢出BUG
在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来. 看个例子: XML/HT ...
- CSS文字溢出处理问题
单行省略 div { white-space:nowrap; //断行处理:无断行 text-overflow:ellipsis; //文字溢出处理:省略号 overflow:hidden; //溢出 ...
- html中文字溢出处理（text-overflow）
文字溢出处理有两种方式: 一.css overflow:hidden; white-space: nowrap; text-overflow: ellips ...
- CSS文字溢出部分自动用"..."代替
CSS文字溢出部分自动用"..."代替 如html部分: <h4><马尔代夫双鱼岛Olhuveli4 晚6 日自助游></h4> <p&g ...
随机推荐
- 高性能linux服务器内核调优
高性能linux服务器内核调优 首先,介绍一下两个命令1.dmesg 打印系统信息.有很多同学们服务器出现问题,看了程序日志,发现没啥有用信息,还是毫无解决头绪,这时候,你就需要查看系统内核抛出的异常 ...
- uname命令
uname用于显示系统信息. 语法: uname [option]... 选项: -a:显示所有信息: -s:显示内核名称: -n:显示主机名: -r:显示内核版本: -v:显示更多的内核版本信息: ...
- ANSJ中文分词使用方法
一.前言 之前做solr索引的时候就使用了ANSJ进行中文分词,用着挺好,然而当时没有写博客记录的习惯.最近又尝试了好几种JAVA下的中文分词库,个人感觉还是ANSJ好用,在这里简单总结之. 二.什么 ...
- Hive load from hdfs 出错
hive 加载HDFS的数据时出现错误, FATAL:SemanticException [Error 10028] search了一下,跟他一样Hive load from hdfs 出错. 我按照 ...
- 【转】纯手工玩转 Nginx 日志
Nginx 日志对于大部分人来说是个未被发掘的宝藏,总结之前做某日志分析系统的经验,和大家分享一下 Nginx 日志的纯手工分析方式. Nginx 日志相关配置有 2 个地方:access_log 和 ...
- 每天一道Java题[7]
题目 什么是REST原则,请解释RESTful架构,以及其设计思想? 解答 REST,全称为Representation State Transfer,是一种互联网软件的架构原则.凡是满足REST原则 ...
- java swing 添加 jcheckbox复选框
总体上而言,Java Swing编程有两大特点:麻烦.效果差. 麻烦是说由于设计器的使用不方便(如果您希望使用窗体设计器通过快速拖拽控件建立您的Java Swing GUI程序,请您使用MyEclip ...
- AngularJs之初
很久以前就听人说起angularjs,但一直都没有深入了解过.直到最近才在自己心里有了一个准确的定义.和相濡以沫多年的函数库JQuery相比,angular更像一个框架.对,就是一个框架,相比之下的话 ...
- 使用Charles Proxy提升iOS开发效率
以前做前端开发的时候,使用最多的工具就是 Fiddler ,用来定位问题.模拟特定场景非常方便,极大提升了开发效率.而转做 iOS 开发以后,一大头疼的问题是 Fiddler 没有 Mac 版,幸亏找 ...
- [rctf](web)rcdn 解题分析，知识点总结
比赛平台关闭了,没有截图,见谅. 解题思路流程: 分析网站结构,看源码,元素审计.发现以下信息. 要得到flag要获得一个pro cdn pro 子域名长度为3到6个字符 存在一个提交ticke页 ...