AngularJS的文字溢出處理
需求大體如圖所示，因爲本人也是新接觸AngularJS，研究很久，製做了一個demo,代碼以下：html
<!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>jquery
<div ng-app="myApp" ng-controller="namesCtrl"> app
<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>ide
</div>spa
<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;
}cdn
});
</script>htm
</body>
</html>blog
- 1. 溢出文本處理
- 2. React 文本溢出處理
- 3. Html+CSS下溢出文字處理、背景圖片處理
- 4. overflow溢出處理
- 5. position:absolute溢出處理
- 6. 解決文字溢出和兼容性問題的處理
- 7. 單行文字溢出和多行文字溢出
- 8. 文字溢出處理、背景圖片、企業開發經驗
- 9. 文字溢出處理，背景圖片處理，企業開發經驗
- 10. outmemory 緩存溢出處理
- 更多相關文章...
- • PHP 文件處理 - PHP教程
- • 錯誤處理 - RUST 教程
- • Docker 清理命令
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 溢出文本處理
- 2. React 文本溢出處理
- 3. Html+CSS下溢出文字處理、背景圖片處理
- 4. overflow溢出處理
- 5. position:absolute溢出處理
- 6. 解決文字溢出和兼容性問題的處理
- 7. 單行文字溢出和多行文字溢出
- 8. 文字溢出處理、背景圖片、企業開發經驗
- 9. 文字溢出處理，背景圖片處理，企業開發經驗
- 10. outmemory 緩存溢出處理