首先重构了页面样式，布局更加合理。这样的话也便于我操作①②之间的线。
然后就是删除了一段固定的块状元素，将所有的任务步骤全部加入ng-repeat生成，主要目的还是操作中间那根线，还有就是减少多余的代码，之前还用了arr.shift()获取第一个下标的数，全部加入ng-repeat之后就不需要这个了。直接把任务步骤的第一步添加进一个数组就可以默认生成第一步了。
重头戏就是解决了连线的问题：
思考了好几天，想了好几种方式，最终还是用border来解决了。之前一直在纠结显示隐藏的问题，因为如果当前步骤是最后一步，它的border是不显示的，开始没有进行页面布局规划，思路就变成了2个步骤之间衔接起来，然后无法实现；今天进行页面重构后，上一个步骤显示border，下一个步骤不显示就可以了。
既然是样式的问题，那就是CSS来解决，怎么控制呢，angular当然就用ng-class了，之前都没怎么用过ng-class，今天去看了一波，直接搬点大佬的吧。
//以下为破狼大佬的观点，侵删。
在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素（html/css），在controller需要一个简单的POJO（plain object javascript object），与view完全的隔离（交互angularjs框架的职责。但在某些项目中看见controller涉及DOM的元素最多的是在controller scope上定义某变量，其值为class name，形如：
function ctr($scope){ $scope.test =“classname”; }
这种方式完全没错，是angular提供的一种改变class的方式，但是在controller涉及了classname在我看来是乎总是那么诡异，我希望的是controller是一个干净的纯javascript意义的object。
在angular中为我们提供了3种方案处理class：
1：scope变量绑定，如上例。（不推荐使用）
2：字符串数组形式。
3：对象key/value处理。
我们继续其他两种解决方案：
1字符串数组形式是针对class简单变化，具有排斥性的变化，true是什么class，false是什么class，其形如;
function Ctr($scope) { $scope.isActive = true; }
其结果是2中组合，isActive表达式为true，则 active，负责inactive。
2对象key/value处理主要针对复杂的class混合，其形如：
function Ctr($scope) { }
当 isSelected = true 则增加selected class，
当isCar=true,则增加car class，
所以你结果可能是4种组合。
个人推荐用2，3两种方式，不建议将class放入controller scope之上，scope需要保持纯洁行，scope上的只能是数据和行为。
//以上为破狼大佬的观点，侵删。
看完之后，回到咱的复盘上来，ng-class可以判断采用哪种样式，这就很方便了，接下来就判断true或者false咯，新的问题来了，我们知道ng-repeat都是item in items 的形式，那我怎么在js文件中获得item的参数呢？因为item并没有明确指定，一般情况下怎么操作我目前没有想到好方法，但是结合我们获取item用到了带形参的方法就可以传递数据，所以我就将true或者false经过函数内的判断然后retrun出来不就好了么？所以就这样写了
ng-class="{'course_mission_border':vm.isLast(step.id)}"
根据破狼大佬的讲解，采取了key value的形式来写ng-class，然后value是一个方法，将当前数组中的数据的属性作为一个参数传过去，然后进行判断，就可以了，JS代码如下：
vm.isLast = function (x) {
if(x === vm.a.length){
return false
}else {
return true
}
};
就这么短短几行...就是判断id如果和数组的长度相同，那么这个id就是当然repeat出来最后一个，那么它的ng-class的样式就为false，不显示，其余的都显示。
基本功能都完成了，还有一点小瑕疵，一开始没用border，出现border后会出现唯一，解决的办法也很简单，设定初始border存在，只是透明的，然后ng-class为true后，就变成不透明就可以了。