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 ...
随机推荐
- 在 ubuntu 下优雅的使用 Sublime Text 3 写 Python
此文章非技术文,就是一些对于 Sublime 俺之前经常用的 方法(快捷键 )和 工具 有一些工具俺也用过,但是效果不太好,可以说跟shi 一样,可能每个人的用处不一样,咱就不提了,免得招 来口舌之争 ...
- ui-router多视图+嵌套视图+传参综合练习
ui-router多视图:页面上存在的多个ui-view,它们以名字区分: 嵌套视图:一个ui-view的一个状态下对应了一个html,这个html里面又有一个ui-view. 视图之间传参:用ui. ...
- 基于ZKWeb + Angular 4.0的开源管理后台Demo
这是一套基于ZKWeb网页框架和Angular 4.0编写的开源管理后台Demo,实现了前后端分离和模块化开发, 地址是: https://github.com/zkweb-framework/ZKW ...
- Django入门笔记
Django入门笔记 **文档包含Django安装包.学习的笔记.代码等 安装 Django参考附件,只需要把附件拷贝到你需要的目录就行.Django是1.8.16版本 Python:在附件中,其中有 ...
- Linux中Nginx反向代理下的tomcat集群
Nginx具有反向代理(注意和正向代码的区别)和负载均衡等特点. 这次Nginx安装在 192.168.1.108 这台linux 机器上.安装Nginx 先要装openssl库,gcc,PCRE,z ...
- 使用faker 生成中文测试数据
https://github.com/fzaninotto/Faker/blob/master/src/Faker/Provider/zh_CN/Address.php 常用的类型都在里面. 下面是一 ...
- MyBatis之级联小结
在这之前我们知道了MyBatis为我们提供了三种级联:一对一关系(assocation).一对多关系(collection).鉴别器(discriminator).在最后一个鉴别器例子中,看到了当层级 ...
- Spring切面通知执行的顺序（Advice Order）
问题描述 如果在Spring的程序中同时定义了环绕通知(Around)和前置通知(Before)..那么,有以下问题: 1.怎么让两个切面通知都起作用 2.或者让两者切面按自己指定的顺序进行执行? 3 ...
- java 学习笔记1 java语言概述及开发环境
高级语言运行机制 高级语言按程序的执行方式分为编译型和解释型两种. java语言比较特殊,Java程序的执行必须经过先编译后解释的步骤. 1 编译生成字节码,只面向JVM(.class) 2Jvm执行 ...
- Gradle 使用Maven本地缓存
如果想使用Maven本地缓存,需要定义:build.gradle 文件下定义 build.gradle repositories { mavenLocal() } Gradle使用与Maven相同的策 ...