AngularJS 요소 고정 위치 다른 요소를 기반으로

Question

이 앱은 필수적인 배경 또는 작업 영역 인 이미지를 사용합니다. 특정 좌표 (위쪽, 왼쪽, 너비, 높이)가 주어진이 작업 영역에 입력 텍스트 필드를 추가해야합니다. 이 좌표는 이미지에 상대적입니다 (상단/왼쪽 = 0/0). 필드/요소를 이미지에 상대적으로 배치하려면 어떻게해야합니까?

 <img id="background" ng-src="{{page.backgroundImage}}" /> 
     <input type="text" ng-repeat="field in page.fields" ng-model="field.value" 
       ng-style="{position:'absolute', 
           left:field.left, 
           top:field.top, 
          width:field.width, 
          height:field.height}"/> 

위 코드는 절대 위치 지정에 유용하지만 이미지와 관련이 없습니다.

Answer 1

<div style="position:relative"> 
    <img id="background" ng-src="{{page.backgroundImage}}" class="course-image" /> 
    <input type="text" ng-repeat="field in page.fields" ng-model="field.value" 
      style="position:absolute" 
      ng-style="{left:field.left, 
         top:field.top, 
        width:field.width, 
        height:field.height}" />  
</div> 

당신은 동적으로 추가/클래스를 제거하는 NG-클래스를 사용할 수 있습니다