Question

我希望在项目的悬停时显示一个弹出的docDetails值。看着像

这样的东西

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

的小弹出窗口

来自bootstrap的任何东西我都可以随时使用？对所有建议开放。

由于

Answer 1

这是你可以尝试的东西[Plunker] [1] 请使用下面提到的链接

http://plnkr.co/edit/J050zPX5rhLmS2HVBAGy Plunker

或以其他方式使用下面提到的内容

脚本 -

var app = angular.module（“app”，[]）;

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="angular.js@1.3.17" 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>

AngularJs - 显示一个显示范围值的弹出窗口

1 个答案: