AngularJS基于另一个元素设置元素固定位置

时间:2014-04-08 15:26:47

标签: css angularjs angularjs-directive

这个应用程序拍摄的图像,这是背景或工作区必不可少的。我需要在给定特定坐标(顶部,左侧,宽度,高度)的情况下将输入文本字段添加到此工作空间中。这些坐标将相对于图像(上/左= 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}"/>

上面的代码非常适合绝对定位,但它与图像无关。

1 个答案:

答案 0 :(得分:4)

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