Question

我有文本显示在一组3列乘17行的每个元素中。我有它，所以每组文本限制为100个字符，但我已经实现了一个more按钮，如果你点击它，它将显示其余的字符。每个元素的文本长度不同。问题是，当我点击更多时，整个行高度会扩大，而不仅仅是扩展该元素的行高。这意味着如果我点击行中第一个元素的more按钮，但是没有点击该行中任何其他元素的more按钮，行高将会扩展因为要显示更多文本，但由于文本中第一个元素的扩展，所有尚未展开的其他元素在其下方都有很多空白区域。有没有办法简单地只扩展该元素的行高，但是对于该行中的所有其他元素，是否保持行高相同？以下是我的尝试：

HTML：

<div class="row" ng-repeat="datasourceRow in datasourceRows track by $index">
    <div ng-repeat="datasource in datasourceRow track by $index" class="col-sm-4">
        <p style="color: gray; overflow: hidden;" dd-text-collapse dd-text-collapse-max-length="100" dd-text-collapse-text="{{datasource.description}}"></p>
    </div>
</div>

JavaScript的：

app.directive('ddTextCollapse', ['$compile', function($compile) {

    return {
        restrict: 'A',
        scope: true,
        link: function(scope, element, attrs) {

            // start collapsed
            scope.collapsed = false;

            // create the function to toggle the collapse
            scope.toggle = function() {
                scope.collapsed = !scope.collapsed;
            };

            // wait for changes on the text
            attrs.$observe('ddTextCollapseText', function(text) {
                // get the length from the attributes
                var maxLength = scope.$eval(attrs.ddTextCollapseMaxLength);

                if (text.length > maxLength) {
                    // split the text in two parts, the first always showing
                    var firstPart = String(text).substring(0, maxLength);
                    var secondPart = String(text).substring(maxLength, text.length);

                    // create some new html elements to hold the separate info
                    var firstSpan = $compile('<span>' + firstPart + '</span>')(scope);
                    var secondSpan = $compile('<span ng-if="collapsed">' + secondPart + '</span>')(scope);
                    var moreIndicatorSpan = $compile('<span ng-if="!collapsed">... </span>')(scope);
                    var lineBreak = $compile('<br ng-if="collapsed">')(scope);
                    var toggleButton = $compile('<span class="collapse-text-toggle" ng-click="toggle()">{{collapsed ? "less" : "more"}}</span>')(scope);
                    // remove the current contents of the element
                    // and add the new ones we created
                    element.empty();
                    element.append(firstSpan);
                    element.append(secondSpan);
                    element.append(moreIndicatorSpan);
                    element.append(lineBreak);
                    element.append(toggleButton);
                    element.append(detailsLink);
                }
                else {
                    element.empty();
                    element.append(text);
                }
            });
        }
    };
}]);

CSS：

.collapse-text-toggle {
    font-size: 1.0em;
    color: #666666;
    cursor: pointer;
}
.collapse-text-toggle:hover {
    color: #222222;
}
.collapse-text-toggle:before {
    content: '(';
}
.collapse-text-toggle:after {
    content: ')';
}

编辑：添加了一个小提琴：https://jsfiddle.net/g7z6jgnb/2/

Answer 1

我假设你正在使用基于你的类名的bootstrap。如果是这样，那么我不会认为您可以隔离该行中的单个元素并展开它而不在其他元素下面创建空白区域。您不能为每组三个元素创建一个新行。包含一行中的所有元素，如果它们都具有类名称col-md-4，那么每行最多只能有3个，并且可以让它们彼此独立地重新调整大小。否则我会考虑使用popover或modal来显示更多信息。

Answer 2

您正在设置折叠值true和false，这适用于您的所有按钮，需要使其成为唯一标识符。如果你可以尝试分享小提琴链接。

       // start collapsed
        scope.collapsed = false;

        // create the function to toggle the collapse
        scope.toggle = function() {
            scope.collapsed = !scope.collapsed;
        };

在此部分创建一个折叠数组，其中$ index为标识符：

       scope.collapsed[$index] = true;
      // something like this will work

在ng-repeat中只增加一个元素的行高？

2 个答案: