angularjs başka bir öğe

Question

Bu uygulama, temel bir arka plan, veya çalışma alanı olan bir görüntü alır, temel. Belirli çalışma alanlarına (üst, sol, genişlik, yükseklik) verilen bu çalışma alanına giriş metin alanları eklemem gerekiyor. Bu koordinatlar resme göreli olarak (üst/sol = 0/0) olacaktır. Alanlarımı/öğeleri resme göre nasıl yerleştiririm?

 <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}"/> 

Yukarıdaki kod, mutlak konumlandırma için harika çalışıyor ancak göreli değil.

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> 

dinamik eklemek/sınıfları kaldırmak için ng-sınıfını kullanabilirsiniz