Question

我有一个包含ng-repeat details的列表当我将鼠标悬停在其中一个li上时，我希望名为background的div位于ng-repeat之外，以将其背景更改为details＆＃39; s url。

但我不知道如何让外部元素访问ng-repeat的数据。

plunkr：https://plnkr.co/edit/lGRfE9YGYN645Ztpr94K?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

    $scope.details = [
   { "name": "Employees", "url":"https://i.pinimg.com/736x/76/47/9d/76479dd91dc55c2768ddccfc30a4fbf5--pikachu-halloween-costume-diy-halloween-costumes.jpg" },
   { "name": "Support", "url":"https://i.pinimg.com/736x/76/47/9d/76479dd91dc55c2768ddccfc30a4fbf5--pikachu-halloween-costume-diy-halloween-costumes.jpg" }
    ];

});

HTML：

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="background">
  <ul ng-repeat="detail in details">
    <li>{{detail.name}}

    </li>
  </ul>
  </div>
  </body>

</html>

Answer 1

您可以在li项目上使用 ng-mouseover ，并使用 ng-style 对 div

<div ng-style="{'background-image':'url(' + bgUrl + ')'}">

<强>样本

var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.details = [ { "name": "Employees", "url":"https://i.pinimg.com/736x/76/47/9d/76479dd91dc55c2768ddccfc30a4fbf5--pikachu-halloween-costume-diy-halloween-costumes.jpg" }, { "name": "Support", "url":"http://i.stack.imgur.com/IosVb.png" } ]; $scope.applybackground=function(detail){ $scope.bgUrl = detail.url; } });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <link rel="stylesheet" href="style.css" /> </head> <body ng-controller="MainCtrl"> <div ng-style="{'background-image':'url(' + bgUrl + ')'}"> <ul ng-repeat="detail in details"> <li ng-mouseenter="applybackground(detail)">{{detail.name}} </li> </ul> </div> </body> </html>

Answer 2

您可以使用ng-mouseover访问控制器中的详细信息对象。

<body ng-controller="MainCtrl">
  <div class="background" ng-style="{'background-image':'url({{myBackgroundUrl}})'}">
    <ul ng-repeat="detail in details">
      <li ng-mouseover="onHover(detail)">{{detail.name}}</li>
    </ul>
  </div>
</body>

在控制器上：

$scope.myBackgroundUrl = '';
$scope.onHover = function(detail) {
  console.log(detail.url)
  $scope.myBackgroundUrl = detail.url;
}

Answer 3

使用ng-mouseover类似

<div class="background" style="background-image:url('{{backGroundUrl}}')">
<ul >
    <li ng-mouseover="change(detail.url)" ng-repeat="detail in details">
      {{detail.name}}

    </li>

  $scope.change= function(url){
      $scope.backGroundUrl=url;
    }

Here is working example

在外部ng-repeat中访问数据之外的元素

3 个答案: