How can add a CSS class if a condition is met Angular JS

问题

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

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.

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>

回答1:

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

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.

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.

Docs for 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>

来源：https://stackoverflow.com/questions/46184676/how-can-add-a-css-class-if-a-condition-is-met-angular-js

标签

javascript

angularjs

haml

truncate