Question

我正在尝试使用“... more”文本显示div内容的省略号。我也试图用ng-click显示点击'.... more'的全文。

我正在尝试的是在点击时添加悬停类，但在连接点击事件时出现问题以显示更多文字。

<div ng-controller="MyCtrl" id= 'divEllipseContainer' class="{{class}}" ng-click ="showEllipseContent()">
  Chandra is in office with his beautiful wife with sour cream on her face.
</div>

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    $scope.class = "appEllipseContent";

    $scope.showEllipseContent = function(){
        if ($scope.class == "appEllipseContent")
            $scope.class = "";
         else
            $scope.class = "appEllipseContent";
    };
}

.appEllipseContent {
    overflow: hidden;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    width:200px;
}

    .appEllipseContent:hover {
        overflow: visible;
        white-space: normal;
    }

Answer 1

使用ng-class和ng-click一起根据布尔值应用一个类，如下所示：

的index.html

ID      Mac
1     21321
2     45666

的style.css

<!DOCTYPE html>
<html ng-app>
  <head>
    <script data-require="angular.js@1.3.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div ng-class="{'appEllipseContent': !isActive, 'appEllipseContenthover': isActive}"
         ng-click="isActive = !isActive">
         Chandra is in office with his beautiful wife with sour cream on her face.
    </div>
  </body>      
</html>

这是plunk。

Answer 2

检查一下，我认为这就是你想要的。

[http://jsfiddle.net/HB7LU/23727/]

HTML

<div  id= 'divEllipseContainer' ng-mouseover="test2()"  class="{{class}}" >
  Chandra is in office with his beautiful wife with sour cream on her face. 
</div><a ng-hide="test" ng-mouseleave="test2()" ng-click="showEllipseContent()">...more</a>
</div>

JS

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.class = "appEllipseContent";
$scope.test = true;

$scope.showEllipseContent = function(){

    if ($scope.class == "appEllipseContent")
        $scope.class = "";
     else
        $scope.class = "appEllipseContent";
   };

   $scope.test2 = function(){
       if ($scope.test)
        $scope.test = false;
     else
        $scope.test = true;
};
}

Angularjs使用ng-click显示更多省略号文本

2 个答案: