전환, 텍스트가 긴

Question

내 목표는 여기에 있지만 경우에만하면 입력와 컨텐츠의 길이는 사용자 클릭이 20보다 큰 경우하지 내가 계속한다면, 텍스트 영역마다 시간을 표시하는 것입니다 보통 입력을 보여줍니다.

내 논리에 무엇이 빠졌는지 모르겠지만 이제는 diff 동작이 나타납니다.

긴 텍스트와 입력에서 처음으로 사용자가 클릭이는 텍스트 영역 때 흐림이 정상 입력 다시하게 일어날를 표시하는 경우

.

문제 때 짧은 콘텐츠에서 그리고 긴 콘텐츠에서 제 시간에 의해 처음으로 사용자 클릭. 입력 모두 텍스트 영역이됩니다. 긴 내용 만 텍스트 영역이되어야합니다.

논리에 무엇이 누락 되었습니까?

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> 

, 나는 $ 지수를 처리하기 위해 노력하고있어,하지만 아직 작동하지 않습니다. TR을 한 번 반복해서 포함 시켰습니다. 이제 색인을 다루려고하기 때문에이 줄을 이해하는 것이 좋습니다.

이 접근법으로 지금까지 문제는 $ index 값이 매번 동일한 값, 예 : TD (0), TD (1), 두 번째 줄 TD (0), TD (1) . 고유 식별 정보가 없습니다. $ parent. $ 인덱스를 사용하더라도 같은 문제가 발생합니다.

어떻게 이런 상황에서이 색인을 고유 한 식별 정보로 만들 수 있습니까?

Answer 1

잘 작동하는 최종 결과를 따르십시오.

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> 

Answer 2

시도해주세요.

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