Toggle between input and textarea, but only if the text is long

Question

My goal here is to show a textarea every time when the user click in the input and its content length is greater than 20, if not I keep showing the normal input .

I don't know what is missing in my logic, but now I'm getting a diff behavior.

If the user click by first time in the input with long text it shows the textarea and when the blur happen become again in a normal input .

The problem is when the user click by first time in the short content and by second time in the long content . Both input become textarea . Only the long content should become a textarea.

What is missing in my logic?

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

VIEW

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

UPDATED:

I think now I'm almost there.

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

};

VIEW

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

Now, I'm trying to deal with the $index, but it's not working yet. If you realize I included one TR with repeat. Now make sense show this line, because I'm trying to deal with the index.

I think the problem so far with this approach is that the $index value repeats every time with the same value, ex: TD(0), TD(1), second line TD(0), TD(1). I don't have an unique identify. Even if I use the $parent.$index I'll have the same problem.

How Can I make this index in this situation an unique identify?

Answer 1

try something like this?

<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

Follows the final result working fine.

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

};

VIEW

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