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

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

编辑:添加了一个 fiddle :https://jsfiddle.net/g7z6jgnb/2/

Answer 1

我假设您使用的是基于您的类名的 Bootstrap 。如果是这种情况，那么不，我不认为您可以隔离该行中的单个元素并展开它而不在其他元素下方创建空白。您可以不为每组三个元素创建一个新行。将所有元素包含在一行中，如果它们都具有类名称 col-md-4，那么每行最多仍然只有 3 个元素，并且可以让它们彼此独立地调整大小。否则我会考虑使用弹出窗口或模式来显示更多信息。