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 ...
随机推荐
- sublime text 3文件标题无法显示中文的解决办法
前言 你是否遇也到了sublime文件标题无法显示中文的问题呢?如下列图片所示: 解决办法 1.点击菜单栏Preferences - > Settings. 打开下图: 2.在右边User内加入 ...
- html页面顶部出现一段空白,检查控制台发现body 下出现字符,原因及解决办法
html页面顶部出现一段空白,检查控制台发现body 下出现字符,原因及解决办法 分析: 原来是页面编码时增加了BOM,此页面后端数据主要是PHP语言,对PHP来讲PHP在设计时 ...
- zabbix安装配置
实验环境 主机名 操作系统版本 IP地址 安装软件 console CentOS 7.0 114.55.29.246 Httpd.Nginx.MySQL.Zabbix log1 CentOS 7.0 ...
- windows下命令行cmder工具
windows下系统自带的命令行工具,实在是太丑了,输入命令后,有时排版乱七八糟,而且使用惯liunx系统的命令后,实在是不能够接受,这么蹩脚的工具:为此我给大家推荐一款实用的开源工具cmder 下载 ...
- iOS 比较版本号大小的方法
比较iOS版本号大小 eg:3.2.0和3.1.0 或者 3.2.0和3.2比较 返回bool值变量YES or NO -(BOOL)compareVesionWithServerVersion:(N ...
- 关于List<T> 的排序
/** * @author hjn * @entity Student * @date 2017年5月23日15:22:18 */ public class Student { private Str ...
- Android中SimpleAdapter的使用—自定义列表
本人初学Android,今天研究到Adapter这块感觉挺有意思的,写了个自定义列表进行测试 首先我们新建一个layout列表布局文件,具体布局可以自己设定. 下面贴上我的自定义布局文件代码 < ...
- Updates were rejected because the remote contains work that you do
每次建立新的仓库,提交的时总会出现这样的错误,真是头疼,...... 直接开始正题,git 提交的步骤: 1. git init //初始化仓库 2. git add .(文件name) //添加文件 ...
- 每天一道Java题[11]
题目 synchronized怎么实现线程同步?请修改<每天一道Java题[10]>中的MyRunnableThread类以解决三个线程都获取到10的问题. 解答 方法一: 采用synch ...
- gradle windows 环境变量
我的电脑 -> 高级环境变量 GRADLE_HOME D:\soft\gradle-3.5 path %GRADLE_HOME%\bin