AngularJs - Показать всплывающее окно, отображающее значения из области действия

Я хочу показать всплывающее окно со значениями из docDetails при наведении на элемент. глядя на то, какAngularJs - Показать всплывающее окно, отображающее значения из области действия

<div ng-repeat="row in docDetails"> 
      <div ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" class="col-sm-2"> 
       {{row.DocumentTypeName}} 

<span class="??" style="white-space: normal;" ng-show="hoverEdit"> 
        {{row.DocumentUploadedBy}} 
       </span>

hoverEdit набор для true/false в hoverIn() и hoverOut() методом.

Я смотрю на две вещи на парении, я хочу, чтобы показать руку мыши, и отображать небольшие всплывающие с содержанием {{row.DocumentUploadedBy}}

Anything от начальной загрузки я могу легко использовать? Открыта для всех предложений.

Благодаря

источник

2015-07-16 KeenUser

Пожалуйста, поделитесь скрипку или plunker –

К сожалению, я не имею рабочую версию, я даю идею я отправил этот образец. docDetails obj array содержит DocumentTypeName и DocumentUploadedBy – KeenUser

Вопросы, требующие рекомендаций сторонних инструментов или библиотек, не соответствуют теме этого сайта из-за количества создаваемого им спама. – Claies

-2

Вот то, что вы можете попробовать [Plunker] [1] Пожалуйста, используйте ссылку, указанную ниже

http://plnkr.co/edit/J050zPX5rhLmS2HVBAGyPlunker

или в других терминах использовать что-то вроде этого упомянуто ниже

сценарий-

var app = угловой.modul е ("приложение", []);

app.controller ('главной', [ "$ Сфера", функция ($ масштаб) {

$scope.docDetails = [ 
    {DocumentTypeName:"Type-1",DocumentUploadedBy:"User-1",ShowInfo:false}, 
    {DocumentTypeName:"Type-2",DocumentUploadedBy:"User-2",ShowInfo:false}, 
    {DocumentTypeName:"Type-3",DocumentUploadedBy:"User-3",ShowInfo:false}, 
    {DocumentTypeName:"Type-4",DocumentUploadedBy:"User-4",ShowInfo:false} 
];

}]);

и HTML, как

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body > 
 
    <div ng-controller="main"> 
 
    <div style="border:1px solid black; height:200px;"> 
 
     {{hoverEdit}} 
 
     <div ng-repeat="row in docDetails"> 
 
      <div style="border:1px solid red; width:200px; height:20px;" ng-mouseover="row.ShowInfo=true" ng-model="hoverEdit" ng-mouseleave="row.ShowInfo=false"> 
 
      {{row.DocumentTypeName}} 
 
      <span style="white-space: normal;" ng-show="row.ShowInfo" > {{row.DocumentUploadedBy}} </span> </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </body> 
 
</html>

источник

2015-07-16 13:41:10

Ссылка только ответы не считаются полезными, так как сами ссылки могут измениться. И это определенно ответ только на ссылку, хотя ссылка есть в комментариях, а не в теле ответа. Лучше всего, если вы разместите соответствующие части ссылки в ответе. – Claies

просто перемещение ссылки от комментариев к телу не улучшает качество ответа; это по-прежнему ответ только на ссылку, поскольку мы не можем прочитать ответ и ничего не знать о предлагаемом решении, не нажимая ссылку. – Claies

@Claies - Прекрасно ли сейчас в ans –

AngularJs - Показать всплывающее окно, отображающее значения из области действия

ответ

Смежные вопросы