0

我想制作与网页的主标题栏一起滚动的栏，并显示用户搜索的技能历史记录。

当用户将鼠标悬停在列出的技能（ng-mouseover）上时，它应该被突出显示并且应该改变交叉图像。

当用户的光标离开技能（ng-mouseleave）时，高亮应该消失并且图像应该改变。

当我将技能列表硬编码为 html 时，它会起作用。

但是，当我尝试使用由 ng-repeat 渲染的模拟值（来自控制器中的变量）时，甚至不会渲染技能。

.html 的片段：

<div class="listed-skills">
  <ul>
    <li ng-repeat="skill in skillsList" ng-init="this['crossIcon' + skill.num] = false" ng-mouseover="this['crossIcon' + skill.num] = true" ng-mouseleave="this['crossIcon' + skill.num] = false">
      <span class="history-skill-name">{{skill.name}}</span>
      <img src="/images/header-skillbar-cross-dark.svg" alt="Delete skill from search history" ng-if="this['crossIcon' + skill.num] == true" />
      <img src="/images/header-skillbar-cross-light.svg" alt="Delete skill from search history" ng-if="this['crossIcon' + skill.num] == false" />
      <span class="skill-list-separator">|</span>
    </li>
  </ul>
</div>

.coffee 中的范围变量：

$scope.skillsList = [
  {name: "Piano", num: 1},
  {name: "Hiking", num: 2},
  {name: "Cycling", num: 3},
  {name: "Football", num: 4},
  {name: "Computer programming", num: 5},
  {name: "Kung-Fu", num: 6}
]

根据这个答案（Dynamic ng-init variable - Angularjs），

ng-init="this['Foo' + foo.Bar] = blah"

是创建动态 ng-init 变量的正确方法之一。

但是当我的应用程序运行时，这些技能不是由 Angular 呈现的。我在 chrome 开发工具中只看到了这个：

<!-- ngRepeat: skill in skillsList -->

不过，控制台中没有错误。发生了什么事，我该如何修复它？

4

1 回答 1

0

您的代码似乎工作，也许有什么遗漏或冲突？检查您的控制器和应用程序是否正在使用简单的测试变量。

另外，我知道这是否只是为了测试，但是在悬停时显示图像确实是 css 的工作。您可以轻松地向 's 添加悬停状态li，它的性能也会更好。

angular.module('test',[])
.controller('test', function($scope) {
$scope.skillsList = [
  {name: "Piano", num: 1},
  {name: "Hiking", num: 2},
  {name: "Cycling", num: 3},
  {name: "Football", num: 4},
  {name: "Computer programming", num: 5},
  {name: "Kung-Fu", num: 6}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="test">
<div class="listed-skills">
  <ul>
    <li ng-repeat="skill in skillsList" ng-init="this['crossIcon' + skill.num] = false" ng-mouseover="this['crossIcon' + skill.num] = true" ng-mouseleave="this['crossIcon' + skill.num] = false">
      <span class="history-skill-name">{{skill.name}}</span>
      <img src="/images/header-skillbar-cross-dark.svg" alt="Delete skill from search history" ng-if="this['crossIcon' + skill.num] == true" />
      <img src="/images/header-skillbar-cross-light.svg" alt="Delete skill from search history" ng-if="this['crossIcon' + skill.num] == false" />
      <span class="skill-list-separator">|</span>
    </li>
  </ul>
</div>
  </div>

于 2015-04-27T18:11:58.713 回答