내 앱에 대한 '더보기'버튼을 만들려고하는데 문제가 발생했습니다.
사용자가 더 읽기 버튼을 클릭하면 작업을 수행하라는 지시가 있습니다.
(function(window, angular) {
var app = angular.module('myApp');
app.directive('readMore', [
function() {
return {
restrict: 'A',
template:'<a class="read-more-button"></a>',
link: function(scope, element) {
element.bind('click', function(){
// do stuff
})
}
};
}
]);
})(window, angular);
HTML
<div id="container">
<div ng-repeat="item in items">
{{item.description}}
</div>
</div>
<a ng-show="items.length > 10" read-more href="#"></a>
//only show read more button when I have more than 10 items
CSS :
#container {
height: 250px;
overflow: hidden;
}
문제는 때때로 단일 item.description텍스트에 긴 텍스트가 있고 내 #containerdiv는 8 개 항목 만 저장할 수 있고 나머지는 숨겨져 있다는 것입니다. 나는 그것이 실용적이지 않다고 생각했기 때문에 글자를 세고 싶지 않습니다. 어쨌든 이것을 고칠 수 있습니까? 도와 주셔서 감사합니다!
최신 정보:
원하는 결과는 다음과 같습니다. 더 읽기 버튼을 클릭하면 div 크기가 원하는대로 확장됩니다. 현재 더 읽기 버튼은 앱에 10 개 이상의 항목이있는 경우에만 표시됩니다. 내 질문은 8 항목 텍스트가 이미 250px div를 채우고 있지만 실제로 9 항목이있을 때 더 많은 버튼을 올바르게 표시 / 숨기기하는 방법입니다 (따라서 더 많은 버튼을 표시해야하지만 9 개의 항목 만 있으므로 더 읽기 버튼이 표시되지 않습니다 .)
결론은 : 내가 가지고있는 항목의 수에 관계없이 #container div가 텍스트로 채워질 때 더 읽기 버튼을 언제 표시해야하는지 알아야합니다.
CSS에 대한 논의가 필요하다고 생각합니다.
#container {
height: 250px;
overflow: hidden;}
이는 높이를 250px로 고정하고 싶다는 의미이며 #container의 내용이 250px보다 높은 경우 중복 부분이 숨겨집니다.
따라서 때로는 단일 item.description에 긴 텍스트가 포함되어있어 8 개 또는 7 개 또는 6 개의 항목 만 표시됩니다. 맞습니다.
두 가지 방법이 있습니다.
높이를 250px로 고정하고 싶지 않은 경우. 다음으로 변경할 수 있습니다.
'#container {height : auto; overflow : visible;}
도움이 되었기를 바랍니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다