如果条件满足角JS，如何添加CSS类

I'm working on creating a truncate directive and I have the string of text truncating if the characters exceed 10. It will then display the "...".

我正在创建一个截断指令，如果字符超过10，我有一个文本截断字符串。然后它将显示“…”。

My Goal is to write a condition that removes the "..." if the characters are less than 10. Kind of stuck on this and open to suggestions if anyone has any ideas on how I could accomplish this.

我的目标是编写一个条件，如果字符小于10，就删除“…”。如果有人知道我该怎么做的话，我就会接受他们的建议。

Here is my code:

这是我的代码:

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>

3 个解决方案

#1

You can simply use ngHide directive on the span element that contains '...', with the following condition:

您可以简单地对span元素使用ngHide指令，其中包含“…”，并有以下条件:

ng-hide="input.length <= maxCharacters || !length"

that means that this element is going to be hidden in case the length of input is less or equals maxCharacters or filter is not applied.

这意味着该元素将被隐藏，以防输入的长度小于或等于maxCharacters或filter不应用。

Working example based on your 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>

#2

Angular has an ngClass directive that will apply a class based on the evaluated text of the expression. Just write a function that returns a different class depending on the string length and then call that in ngClass.

angle有一个ngClass指令，它将根据表达式的计算文本应用一个类。只需编写一个函数，根据字符串长度返回不同的类，然后在ngClass中调用它。

Docs for ngClass: https://docs.angularjs.org/api/ng/directive/ngClass

ngClass文档:https://docs.angularjs.org/api/ng/directive/ngClass

Example code snippet

示例代码片段

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>

#3

You can try something like this.

你可以试试这个。

"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>

#1