Question

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

当用户将鼠标悬停在列出的技能（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}
]

根据this answer (Dynamic ng-init variable - Angularjs)，

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

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

但是当我的应用程序运行时，这些技能不会通过角度来呈现。我在chrome dev工具中只看到了这个：

但是在控制台中没有错误。发生了什么以及如何修复它？

Answer 1

你的代码似乎有用，也许有些东西丢失或有冲突？检查您的控制器和应用程序是否使用简单的测试变量。

另外，我理解这是否仅用于测试，但在悬停时显示图像确实是css的工作。您可以在li处添加悬停状态，并且效果也会更好。

＆＃13;

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}
];
});

＆＃13;

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

＆＃13;

Ng-repeat不在ng-init指令内使用动态创建的变量呈现html

1 个答案: