发表于： 2016-08-11 23:18:17
0 2155
今天完成的事情：游戏结束页面完成
明天计划的事情：修改icss样式
遇到的问题：angular是什么用法真的是一步一步试出来的，怎么产生效果了怎么用
收获：
大致翻译一下就是说ng-class指令有3中操作方式，通过ng-class等于的表达式计算出来的值的类型来决定是哪种
方式1： 当它的值为一个字符串时，它就会把用空格分开的字符串加到class中
方式2： 当值为一个数组时，它每个字符串元素都会被加到class中
方式3： 当值为一个对象时(key=>value)，把value为true的key加到class中
首先是最不推荐的
1 2 3 4 5 6 7 | <div ng-class="{{myclass}}"></div> .... <script> function someController($scope){ $scope.myclass = "xxx"; } </script> |
上面这种方法效果上来说没问题，但是完全没必要用ng-class，普通的也能实现这个效果。而且在controller中控制样式总感觉有点儿别扭……
然后说另一种用法
1 | <div ng-class="{true :'red', false :'green'}[someVariable]"></div> |
这种用法就是说variable为true时，就给元素加上red这个class，如果variable为false就加上green这个class，这个在逻辑比较简单的时候还是蛮好用的。
下一种适合需要添加多个类的时候，也就是ng-class的值为一个对象
1 2 3 4 5 6 | <p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p> <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class) <br> <input type="checkbox" ng-model="important"> important (apply "bold" class) <br> <input type="checkbox" ng-model="error"> error (apply "red" class) |
上面代码ng-class就是一个对象，我们把deleted,important,error进行双向数据绑定，当我们在checkbox勾选时，它们变为true，然后对应的key就被加到class中，效果图
还有一种就是数组类型的，数组都每个字符串元素都会被加到class中
1 2 3 4 5 6 | <p ng-class="[style1, style2, style3]">Using Array Syntax</p> <input ng-model="style1" placeholder="Type: bold, strike or red"> <br> <input ng-model="style2" placeholder="Type: bold, strike or red"> <br> <input ng-model="style3" placeholder="Type: bold, strike or red"> |
当我们在样式中定义好bold,strike,red；类的样式后，我们输入这些字符串就会出现效果
返回列表
评论