Question

我正在创建一个truncate指令，如果字符超过10，我会截断文本字符串。然后会显示＆＃34; ...＆＃34;。

我的目标是写一个条件，删除＆＃34; ...＆＃34;如果角色小于10.如果有人对如何实现这一点有任何想法，那么坚持这一点并接受建议。

这是我的代码：

＆＃13;

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
  }
  
});

＆＃13;

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

＆＃13;

Answer 1

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

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>

Answer 2

您可以在包含“...”的span元素上使用ngHide指令，条件如下：

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>

Answer 3

你可以尝试这样的事情。

＆＃13;

process.env.MOCKS = stringMock.substr(0, 30000);
console.log(process.env.MOCKS); // prints the string

process.env.MOCKS = stringMock.substr(0, 40000);
console.log(process.env.MOCKS); // prints undefined

＆＃13;

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

＆＃13;

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notruncate {
  white-space: nowrap;
}

＆＃13;

如果条件符合Angular JS，如何添加CSS类

3 个答案: