发表于: 2017-05-18 23:38:47

1 1132


今天完成的事:

继续修改样式;

学习一波angular的模态框;

早上听师姐讲了下修真院的目录结构;

下午听老大讲MVC 

明天计划的事:

修改完样式准备做PPT 

遇到的问题:

哇  时间搜索的BUG终于搞定了,心情倍爽

收获:

ng-class

ng-class用来给元素绑定类名,其表达式的返回值可以是以下三种:

  • 类名字符串,可以用空格分割多个类名,如 ‘class1 class2’;
  • 类名数组,数组中的每一项都会层叠起来生效;
  • 一个名值对应的map,其键值为类名,值为boolean类型,当值为true时,该类会被加在元素上。

与 ng-class 相近的,ng 还提供了ng-class-odd、ng-class-even 两个指令,用来配合 ng-repeat 分别在奇数列和偶数列使用对应的类。这个用来在表格中实现隔行换色再方便不过了。

ng-style

ng-style 用来绑定元素的 css 样式,其表达式的返回值为一个 js 对象,键为 css 样式名,值为该样式对应的合法取值。用法比较简单:

$scope.style = {color:'red'};  <div ng-style="{color:'red'}">ng-style测试</div> <div ng-style="style">ng-style测试</div> 

ng-show、ng-hide、ng-switch

对于比较常用的元素显隐控制,ng 也做了封装,ng-show 和 ng-hide 的值为 boolean 类型的表达式,当值为 true 时,对应的 show 或 hide 生效。框架会用 display:block 和 display:none 来控制元素的显隐。

示例:

<div ng-app=""> <div ng-show="true">1</div> <div ng-show="false">2</div> <div ng-hide="true">3</div> <div ng-hide="false">4</div> </div>  

后一个 ng-switch 是根据一个值来决定哪个节点显示,其它节点移除:

<div ng-init="a=2">     <ul ng-switch on="a">     <li ng-switch-when="1">1</li>     <li ng-switch-when="2">2</li>     <li ng-switch-default>other</li>     </ul> </div>

checkbox

是 input 的扩展,不过,它没有验证相关的东西,只有选中与不选中两个值:ng-true-value、ng-false-value:

<form name="test_form" ng-controller="TestCtrl">   <input type="checkbox" name="a" ng-model="a" ng-true-value="AA" ng-false-value="BB" />   <span></span> </form>



返回列表 返回列表
评论

    分享到