• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
晒太阳的小芒果
博客园    首页    新随笔    联系   管理    订阅  订阅

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}}&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>

 

 

生活虽然一地鸡毛,但仍要欢歌高进; 成长之路虽然有玫瑰有荆棘,但什么都不能阻挡坚强的心。
posted @ 2017-06-23 15:36  晒太阳的小芒果  阅读(702)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3