2018-01-04

首先重构了页面样式,布局更加合理。这样的话也便于我操作①②之间的线。


然后就是删除了一段固定的块状元素,将所有的任务步骤全部加入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后,就变成不透明就可以了。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容