发表于: 2016-07-14 00:16:49
2 2216
今天完成的事:task3用angular重写了一半,修改了task2的样式
明天要做的事:争取把task4写完
收货:
1.angular.foreach方法
var values = {name: 'misko', gender: 'male'};
var log = [];
angular.forEach(values, function(value, key) {
this.push(key + ': ' + value);
}, log);alert(log);
2 数组颜色的排序方法
效果图
循环输出前台 用到ng-class赋css 和ng-repeat 循环输出
<ul id="detail"><li ng-class="{'orange': data[$index], 'blue': !data[$index]}"
ng-repeat="li in total track by $index">
<span>{{$index+1}}-{{li}}</span>
</li></ul>
后台进行行数判断(不同行数不同颜色)
$scope.data = [];
angular.forEach($scope.total, function(data, $index){
$scope.data.push( Math.ceil(($index + 1) / 2) % 2 === 0 ? true : false);
})
3传参的时候一开始用的是:
$state.go('cards', {total: JSON.stringify($scope.total)})
然后学习了一波join() 将数组转换为字符串 然后再通过json传递
然后上面的赋值法都是渣渣,奎哥一脸真诚的说:你为什么用js来控制,直接伪类选择器不就行了?我一脸懵逼,然后去百度了一下,原来之前用的:hover就是伪类选择器之一
第一种是动态伪类 遵循爱恨原则 就是顺序不能颠倒啦
.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/ .demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/ .demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/ .demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
第二种是列表伪类
checked",":enabled",":disabled
input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
第三种nth孙子选择器(都是孙子)
- :first-child选择某个元素的第一个子元素;
- :last-child选择某个元素的最后一个子元素;
- :nth-child()选择某个元素的一个或多个特定的子元素;
- :nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
- :nth-of-type()选择指定的元素;
- :nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
- :first-of-type选择一个上级元素下的第一个同类子元素;
- :last-of-type选择一个上级元素的最后一个同类子元素;
- :only-child选择的元素是它的父元素的唯一一个了元素;
- :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
- :empty选择的元素里面没有任何内容。
- 然后最重要的部分
:nth-child(length);/*参数是具体数字*/ :nth-child(n);/*参数是n,n从0开始计算*/ 如果是n 这是全选0~n的全部 如果是数字 就是第几个 :nth-child(n*length)/*n的倍数选择,n从0开始算*/ :nth-child(n+length);/*选择大于length后面的元素*/ :nth-child(-n+length)/*选择小于length前面的元素*/ :nth-child(n*length+1);/*表示隔几选一*/ //上面length为整数
这种不等式不能引用负值,也就是说li:nth-child(-3)是不正确的使用方法
:nth(2n)选择所有偶数的也等于":nth-child(even)"效果
:nth-child(2n-1) 也等于:nth-child(odd)效果
:nth-child(-n+5) 选择5前面的
:nth-child(n+5) 选择5后面的
:nth-child(4n+1)这种方法是实现隔几选一的效果-------------------这就是我应该使用的
::first-line选择元素的第一行
http://www.w3cplus.com/css3/pseudo-class-selector
代码随后附上
评论