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

【问题标题】：Element outside accessing data in an outside ng-repeat在外部 ng-repeat 中访问数据之外的元素
【发布时间】：2017-10-05 04:39:59
【问题描述】：

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

但我不知道如何让外部元素访问 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>

【问题讨论】：

悬停时使用ng-mouseenter 和ng-mouseleave。将一个变量设置为 true/false 并在 ng-class 中使用该变量来添加您的自定义类。
问题不在于使用这些，我不知道如何访问 ng-repeat 项目。
该变量将通过控制器范围访问。

标签： javascript jquery html css angularjs

【解决方案1】：

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

上使用 ng-style 应用背景

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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

【讨论】：