Как отображать содержимое на Mouseover в новой строке

Question

Это мой код и работает отлично, за исключением случаев, когда мы делаем mouseover, содержимое 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