如何在條件滿足的情況下添加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>

來源

2017-09-12 ThomasBrushel

可以完成同樣的事情沒有角或JavaScript使用文本溢出：省略號財產。 https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow – Ericson578

您可以簡單地使用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>

來源

2017-09-12 21:05:46

非常感謝你！這正是我需要的。我理解它背後的邏輯 – 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>

來源

2017-09-12 20:17:50

這就是爲什麼我卡住了。我在過去的兩週裏一直在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>

來源

2017-09-12 21:22:36 alphapilgrim

如何在條件滿足的情況下添加CSS類Angular JS

回答

相關問題