如何在条件满足的情况下添加CSS类Angular JS
我正在创建truncate指令,并且如果字符数超过10,我将截断文本字符串。它将显示“...”。如何在条件满足的情况下添加CSS类Angular JS
我的目标是编写一个条件,如果字符小于10,则删除“...”。如果任何人对我如何完成此任务有任何想法,我会坚持这一点并接受建议。
这里是我的代码:
var app = angular.module('myApp', []);
// Controller
app.controller('mainCtrl', function($scope) {
$scope.text = "John Doe Blah blah";
});
// Directive
app.directive('truncate', function() {
function link(scope, element, attrs){
scope.truncate = function(str){
if(str.length > 10) {
return 'truncate'
} else{
return 'notruncate'
}
}
}
// Write a condition to check if the username is < 10 characters to hide the ellipse
return{
restrict: 'A',
scope: {
input: '=',
maxCharacters: '=',
href: '=',
isShowMore: '='
},
template: '<h4 ng-init="limit=true;length=maxCharacters">{{input | limitTo: length}}<a ng-attr-href="#" ng-click="limit=!limit;length=limit?maxCharacters: \'\'">{{isShowMore?"Show More":"..."}}</a></h4>',
link: link
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<html ng-app='myApp'>
<body ng-controller='mainCtrl'>
<div href='true' input='text' is-show-more='false' max-characters='10' truncate=''></div>
</body>
</html>
您可以简单地使用ngHide
指令包含span
元素 '...' 上,有以下条件:
ng-hide="input.length <= maxCharacters || !length"
这意味着如果输入的长度小于或等于maxCharacters
或者未应用过滤器,则此元素将被隐藏。根据您的codepen
工作例如:
var app = angular.module('myApp', []);
// Controller
app.controller('mainCtrl', function($scope) {
$scope.text = "John Doe Blah blah";
});
// Directive
app.directive('truncate', function() {
// Write a condition to check if the username is < 10 characters to hide the ellipse
return {
restrict: 'A',
scope: {
input: '=',
maxCharacters: '=',
href: '=',
isShowMore: '='
},
template: '<h4 ng-init="limit=true;length=maxCharacters">{{input | limitTo: length}}<a ng-attr-href="#" ng-click="limit=!limit;length=limit?maxCharacters: \'\'" ng-hide="input.length <= maxCharacters || !length" >{{isShowMore?"Show More":"..."}}</a></h4>'
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<html ng-app='myApp'>
<body ng-controller='mainCtrl'>
<div href='true' input='text' is-show-more='false' max-characters='10' truncate=''></div>
</body>
</html>
非常感谢你!这正是我需要的。我理解它背后的逻辑 – ThomasBrushel
@ThomasBrushel你可以接受答案,如果它解决了你的问题。 –
嘿,我有一个很快的问题,因为你对Angular js非常了解。我试图在这个codepen上做同样的事情https://codepen.io/Brushel/pen/pWbzqM我采取了一点或不同的方法。我已经构建了截断功能,但是,我无法根据一定数量的字符隐藏和显示它。此外,我试图弄清楚如何在不将truncatorBindings附加到HTML标记的情况下使用%atom-heading {text:'whatever'}。如果你打开控制台,你可以看到我得到一个错误,说TypeError:不能设置未定义的属性“文本” – ThomasBrushel
角有将应用基于表达式的计算文本类的ngClass指令。只需编写一个函数,根据字符串长度返回不同的类,然后在ngClass中调用它。
Google文档ngClass:https://docs.angularjs.org/api/ng/directive/ngClass
示例代码片段
var app = angular.module('myApp', []);
// Controller
app.controller('mainCtrl', function($scope) {
$scope.text = "John Doe Blah blah";
$scope.truncate = function(str){
if (str.length > 10) {
return 'truncate'
} else {
return 'notruncate'
}
}
});
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notruncate {
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<div ng-controller="mainCtrl" ng-class="truncate(text)" style="width: 40px">{{text}}</div>
</html>
这就是为什么我卡住了。我在过去的两周里一直在AngularJs工作。我已经有椭圆显示。我只需要说些什么,如果有少于10个char make {{isShowMore?“显示更多”:“...”}}不显示更多。 – ThomasBrushel
我修改了我的代码。要测试只是改变'$ scope.text'的值。它会做你想做的,不需要复杂的布尔逻辑(或自定义指令)。您必须根据您要截断的文本的多少来正确调整div的大小,但这不应该很难。 –
谢谢!我真的很喜欢这个解决方案,如果这不适合大规模的应用程序,它会起作用。这需要是一个指令,以便它可以在网站的多个地方使用。我需要在指令中构建它,然后在组件中构建它。 – ThomasBrushel
你可以尝试这样的事情。
"use strict";
function exampleController($scope) {
$scope.example = "Yeyuh im so long, where does it end?!";
}
function truncate() {
return {
restrict: "A",
scope: {
text: "=",
length: "="
},
link: function($scope, $element, $attrs) {
var elm = $element[0];
$scope.$watch("text", function(newText, oldText) {
if (elm.classList.value.indexOf("notruncate") > -1) {
elm.classList.remove("notruncate");
}
if (newText.length > $scope.length) {
elm.className = "truncate";
}
if (newText.length < $scope.length) {
if (elm.classList.value.indexOf("truncate") > -1) {
elm.classList.remove("truncate");
}
elm.className = "notruncate";
}
});
}
};
}
angular
.module("example", [])
.controller("exampleController", exampleController)
.directive("truncate", truncate);
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notruncate {
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container-fluid" ng-app="example">
<div class="container" ng-controller="exampleController">
<input type="text" ng-model="example" truncate text="example" length="10">
</div>
</div>
可以完成同样的事情没有角或JavaScript使用文本溢出:省略号财产。 https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow – Ericson578