Question

我的目标是每当用户点击输入并且其内容长度大于20时显示 textarea ，否则我会继续显示正常情况的输入

我不知道我的逻辑中缺少什么，但现在我得到了差异行为。

如果用户第一次在输入中点击长文，则会显示 textarea ，并且当模糊发生时再次显示正常输入。

问题是当用户第一次点击短内容时，第二次点击长内容。输入都会变为 textarea 。只有长内容才能成为textarea。

我的逻辑缺少什么？

var longContentChecked = null;

scope.isLongContent = function(l){
    return l && longContentChecked
};

scope.adaptLongContent = function(e){
    var textarea = $(e.target).next();

    if (textarea.val().length > 20) {
        longContentChecked = true;
    }else{
        longContentChecked = false;
    }

    textarea.previous().focus();
    textarea.focus();
};

查看

        <td ng-if="gridLoadColumn($index)" ng-repeat="item in items track by $index">
            <input
                type="text"
                ng-model="item.value"
                ng-click="showLongContent = !showLongContent; adaptLongContent($event);"
                ng-show="!isLongContent(showLongContent);"
            />
            <textarea
                class="dgrid-cell-long-content"
                ng-blur="!showLongContent"
                ng-show="isLongContent(showLongContent);"
                ng-model="item.value"
            ></textarea>
        </td>

更新：

我想我现在差不多了。

var longContentChecked = null;
var longContentIndex = null;

scope.isLongContent = function(l, idx){
    var ret = (l && longContentChecked) && (longContentIndex == idx);
    return ret;
};

scope.adaptLongContent = function(e, idx){
    var textarea = $(e.target).next();

    if (textarea.val().length > 20) {
        longContentChecked = true;
        longContentIndex = idx;
        //textarea.focus();
    }else{
        longContentChecked = false;
        longContentIndex = null;
    }

};

查看

    <tr ng-if="gridLoadRow($index)" ng-repeat="items in dataGrid track by $index">
        <td><strong>{{$index+1}}</strong></td>
        <td ng-if="gridLoadColumn($index)" ng-repeat="item in items track by $index">
            <input
                type="text"
                ng-model="item.value"
                ng-click="showLongContent = !showLongContent; adaptLongContent($event, $index);"
                ng-show="!isLongContent(showLongContent, $index);"
            />
            <textarea
                class="dgrid-cell-long-content"
                ng-blur="!showLongContent; test();"
                ng-show="isLongContent(showLongContent, $index);"
                ng-model="item.value"
            ></textarea>
        </td>
    </tr>

现在，我正在尝试处理$ index，但它还没有工作。如果你意识到我包含一个TR重复。现在有意义地显示这一行，因为我正在尝试处理索引。

我认为到目前为止这种方法的问题是$ index值每次都以相同的值重复，例如：TD（0），TD（1），第二行TD（0），TD（1）。我没有独特的身份证明。即使我使用$ parent。$ index我也会遇到同样的问题。

如何在这种情况下将此索引作为唯一标识？

Answer 1

尝试这样的事情？

<td ng-if="gridLoadColumn($index)" ng-repeat="item in items track by $index">
    <input
        type="text"
        ng-model="item.value"
        ng-click="showLongContent = !showLongContent; adaptLongContent($event);"
        ng-if="item.value.length <= 20"
    />
    <textarea
        class="dgrid-cell-long-content"
        ng-blur="!showLongContent"
        ng-if="item.value.length > 20"
        ng-model="item.value"
    ></textarea>
</td>

Answer 2

遵循最终结果正常工作。

var longContentChecked = null;
var longContentIndex = null;

scope.isLongContent = function(idx){
    return longContentChecked && (longContentIndex == idx);
};

scope.adaptLongContent = function(e, idx){
    var textarea = $(e.target).next();

    if (textarea.val().length > 20) {
        longContentChecked = true;
        longContentIndex = idx;
    }else{
        longContentChecked = false;
        longContentIndex = null;
    }

};

查看

<tbody>
<tr ng-if="lazyLoadRow($index)" ng-repeat="items in dataGrid track by $index" ng-init="counter = $index">
<td><strong>{{$index+1}}</strong></td>
<td ng-if="lazyLoadColoumn($index)" ng-repeat="item in items track by $index" ng-init="iteration = (counter * items.length + $index)">
    <input
        type="text"
        ng-model="item.value"
        ng-click="adaptLongContent($event, iteration);"
        ng-show="!isLongContent(iteration);"
    />
    <textarea
        class="dgrid-cell-long-content"
        ng-show="isLongContent(iteration);"
        ng-model="item.value"
    ></textarea>
</td>
</tr>
</tbody>

在input和textarea之间切换，但仅限于文本很长

2 个答案: