Question

这是我的代码，工作正常，除非我们进行鼠标悬停，否则Mouseover（在本例中为编辑链接）的内容显示在品牌可用的同一行中。

我希望它显示在下一行的旁边。（所以品牌的位置不会受到打扰）。

        <div class="row">
            <div ng-repeat="brand in brands">
                <div class="col-sm-1" id="{{ brand.Id }}" ng-mouseover="hoverEdit = true" ng-mouseleave="hoverEdit = false()"> {{brand.Name | makeUppercase }} </div>
                <span ng-show="hoverEdit">
                    <a>Edit</a>
                </span>
            </div>
        </div>

请帮我解决这个问题。

Answer 1

如果您希望编辑字段位于下一行，请使用ng-repeat-start和ng-repeat-end，以便将数据行组合在一起..

  <div class="row" ng-repeat-start="brand in brands">
      <div class="col-sm-1" id="{{ brand.Id }}" ng-mouseover="hoverEdit = true" ng-mouseleave="hoverEdit = false()"> {{brand.Name | makeUppercase }}
      </div>
  </div>
  <div class="row" ng-repeat-end="" ng-show="hoverEdit">
       (edit fields here)
  </div>

以下是包含不同数据的示例：http://bootply.com/ZON3l5BOoM

如何在新行中显示Mouseover上的内容

1 个答案: