工作笔记之图标切换

需求分析：

• 界面如上图所示，实现的主要功能是点击Filter或Sort右边的“+”或者“-”号后，“+”点击后会切换为”-“号，减号则相反。

技术难点分析：

• “+”或者”-“的小标是从哪来的？怎么定义的
• 其实从css和JavaScript的角度来看，这个功能就是点击触发事件，事件函数来修改元素的类属性。而在Angularjs中时怎么获得元素标签，并且怎么去修改类属性的呢。

实现：

• 搜索资料后发现，原来像“+”或者“-”这样的小图标在font
  awesome中都已经为我们准备好了。我们只需要将其下载下来导入我们得工程中就可以使用这些小图标了。而使用小图标的方式就是在一个i标签中的class中定义样式就可以了，样式必须以fa开头，然后在每个图标的前面加上fa就可以了。具体的示例如下：

<i class="fa fa-plus"></i>

这样就可以显示出一个加号的小图标了。真的很简单，很方便。
- 第二个问题就是说我获取当前元素，有了上面的铺垫，我们在看一下下面的代码：

<a ng-click="shiftStyle($event)"><i class="fa fa-plus"></i></a>

注意，这里我们王函数中传的是$event对象，我们可以在函数中用$event.target来获取当前对象即a标签。但是，我们应该也可以往函数里直接传$event.target来表示当前对象，但是我这样写时，在f12中查看会报错，也是郁闷了半天不知道其原因，但是用$event传却不会报错。于是我就选择了传$event对象。 我们还要获得i标签，我们可以通过$event.target.firstElementChild来获取i元素。然后修改其class属性，我们可以用原生态的js来操作。但是，这里我们使用angular.element($event.target.firstElementChild)来操作，这里angular.element()的作用是将一个dom转换为jquery对象，然后我们就可以利用jquery的removeClass和addClass函数来对i标签的class属性进行操作了。
当然，依照惯例在进行removeClass时又遇到了迷之bug。按照我的理解，removeClass函数会直接删除i标签的class属性。于是我就这样写：

var $ele = angular.element($event.target.firstElementChild);
$ele.removeClass().addClass("fa fa-minus");

结果打开f12一看，你猜怎么着，原来的class属性没有被删掉，反而在后面又加上了”fa fa-minius”属性，于是i标签的整个属性变为了：“fa fa-plus fa fa-minus”,于是我对代码做出了调整：

var $ele = angular.element($event.target.firstElementChild);
$ele.removeClass("fa fa-plus").addClass("fa fa-minus");

这下是起作用了，原先的class属性被删掉了，又重新添加上了“-”号的class属性。
但是，却留下了一道梗。我在其他的地方也用了第一种写法却没有发现问题。这也是醉醉的了，如果看到这篇博文的你知道，欢迎一起讨论