AngularJS 부트스트랩에서 uibCollapse를 사용하는 방법에 대하여 알아봅니다.


# uibCollapse 알아보기


uib-collapse는 선택한 요소 엘리먼트가 열리고 닫히면서 보이고 안보이는 것을 토글처럼 반복합니다. 이는 어코디언 방식처럼 동작하죠.

uib-collapse 디렉티브에 값을 추가하여 사용합니다. 기본값으로 false가 설정되어있으며 true인 경우에 안보이는 상태가 됩니다.


# uibCollapse 예제보기


아래는 간단한 예제코드입니다. 시간을 클릭하여 재설정하고자 할때 해당 UI를 사용하면 매우 편리합니다.

​​​​​​<div ng-click="isEditing = true">{{ hour }}</div>
<div uib-collapse="!isEditing">
  <input type="number" ng-model="hour" />
</div>
​​​​​​​

위의 시간이 나타나는 엘리먼트 요소를 클릭시 isEditing이 true가 되어 그 아래의 시간을 변경하는 압력폼이 스르르 아래로 늘어나게됩니다.


code snippet widget