我想制作一个滚动网页主标题栏的栏,并显示用户搜索的技能历史。
当用户将鼠标悬停在列出的技能(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工具中只看到了这个:
<!-- ngRepeat: skill in skillsList -->
但是在控制台中没有错误。发生了什么以及如何修复它?
答案 0 :(得分:0)
你的代码似乎有用,也许有些东西丢失或有冲突?检查您的控制器和应用程序是否使用简单的测试变量。
另外,我理解这是否仅用于测试,但在悬停时显示图像确实是css的工作。您可以在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}
];
});
&#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;