我从来没有使用过 CSS，通过单击元素，向上箭头和向下箭头会切换，但是 css 有一些问题，我想解决这个问题: 箭头应如表中所示:http://en.wikipedia.org/wiki/List_of_countries_by_foreign-born_population
可以给定/修改类名。
<span class="arrows">
<span ng-hide="field == 'name' order" class="arrow-down"></span>
<span ng-hide="field == 'name' && !order" class="arrow-up"></span>
</span>
我的代码的Js fiddle : http://jsfiddle.net/vyy883Lp/4/
提前感谢您的帮助。
最佳答案
代码有很多错误:
注意:您可以通过打开 chrome 开发人员工具(或您使用的任何浏览器)来检查编译器错误 - 它会通过堆栈跟踪提醒您
- 未声明 Angular 模块
- 指令中的错误需要修复 -
- 和
arrow(人字形)元素需要相互内联 arrow元素需要是block- 所以它们堆叠- 还有....
需要更改代码中的逻辑
在我的代码中，当应用 up 和 down CSS 类时，两个箭头都会显示。
要应用 CSS 类，ng-class 对象中的值需要为真。
为了获得切换效果，它们必须彼此相对放置，然后设置为在使用 ng-click 时循环。
但是它们都需要从 on 开始，所以我在 ng-class 中添加了 clean 变量和 OR 开关> 以确保在页面首次加载时应用 CSS 类。
这是一个有效的演示 - 类似于您链接到的维基百科页面
.
http://jsbin.com/wequmipide/1/edit?html,css,output
关于CSS : Fixing up/down arrow CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27102557/