AngularJS 根据另一个元素设置元素固定位置 [英] AngularJS set element fixed position based on another element

问题描述

此应用拍摄图像，这是必不可少的背景或工作区.我需要在给定特定坐标(顶部、左侧、宽度、高度)的情况下将输入文本字段添加到此工作区.这些坐标将相对于图像(上/左 = 0/0).我将如何相对于图像定位我的字段/元素?

上面的代码适用于绝对定位，但它不是相对于图像.

解决方案

<img id="background" ng-src="{{page.backgroundImage}}" class="course-image"/><input type="text" ng-repeat="page.fields 中的字段" ng-model="field.value"风格=位置:绝对"ng-style="{left:field.left,顶部:字段.顶部，宽度:字段.宽度，高度:field.height}"/>

This app takes an image, which is essential a background, or workspace. I need to add input text fields onto this workspace given specific coordinates (top, left, width, height). These coordinates would be relative to the image (top/left = 0/0). How would I position my fields/elements relative to the image?

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

The code above works great for absolute positioning but it is not relative to the image.

解决方案

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

这篇关于AngularJS 根据另一个元素设置元素固定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！