1.angular  ng-repeat  orderBy 最后一个desc参数一般是true和false,是否逆序，默认是false

<li ng-repeat="item in data | orderBy:sort:desc"></li>

js中实现：

$scope.sort='age';

$scope.data=[{

        name:'mary',

        age:24,

        sex:'female',

        height:'170cm',

        description:'Hi,everyBody,Nice to meet you'

    },    {

        name:'Jackey',

        age:28,

        sex:'male',

        height:'187cm',

        description:'Hi,all,Nice to meet you'

    }];

2.angular    ui-sref使用

具体用法：<a ui-sref="XXXX"></a>,其中XXXX是路由的$state中名为“XXXX”的state

<a ui-sref="app.system.template_bench({pageId:item.pageId,isDefault:resultData.length})"></a>

路由中的配置：

.state('app.system.template_bench', {

            url: '/template_bench/:pageId/:isDefault',

            templateUrl: 'tpl/system/template_bench.html',

            controller: 'template_bench',

当JavaScript重新生成网页时，它会查找$state中名为“app.system.template_bench”的state，读取这个state的url，然后在a标签里生成href="url"，

结果为：<a ui-sref="XXXX" href="#/XXXX.html"></a>

(1)假如动态绑定：

<li repeat="item in items">

<a ui-sref="{{item.statePage}}">{{item.state}}</a>这样是错误的，

ui-sref不支持动态绑定，这样的代码会报错。sref中你只能使用state名，顶多加点参数。

(2)携带参数的ui-sref  :

ui-sref="app.system.template_bench({pageId:item.pageId,isDefault:resultData.length})"对应路由中的参数配置，其实通$state.go()

3.angular   ui-sref-active

ui-sref-active=”select”

例如

<li ui-sref-active="select" ui-sref="main"><span>首页</span></li>

//这个意思是说如果当前点击的路由是main的话，首先点击这个路由会跳转到main的页面，

 //然后如果当前页面就是它的话,那么就会包含select这个样式类的名称

<li ui-sref-active="select" ui-sref="search"><span>附近</span></li>

4.angular ng-class

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

有三种方法：

1、通过$scope绑定（不推荐）

2、通过对象数组绑定

3、通过key/value键值对绑定

第1种,通过$scope绑定：

function ctrl($scope) {   

$scope.className ="selected";  }

对应的页面：<div class="{{className}}"></div>

第2种, 通过对象数组绑定：

function ctrl($scope) {   

$scope.isSelected =true;  

}  

对应的页面：<div ng-class="{true:'selected',false:'unselected'}[isSelected]"></div>    当isSelected为true时，增加selected样式；当isSelected为false时，增加unselected样式。

第3种, 通过key/value键值对绑定：

function ctrl($scope) {   

$scope.isA =true;  

$scope.isB =false;  

$scope.isC =false;  

}  

对应的页面<div ng-class="{'A':isA,'B':isB,'C':isC}"></div>    当isA为true时，增加A样式；当isB为true时，增加B样式；当isC为true时，增加C样式。

例如：<i ng-class="getIconClass(two)"></i>函数返回的是一个字符串，就是动态添加css属性

5.angular ng-include 和 data-ng-include

都是外部引入html页面，data-ng-include是h5的规范化写法，没区别

一定注意双引号内包含单引号

<div data-ng-include=" 'tpl/blocks/nav.html' "></div>

<div ng-include="'tpl/common/modal.html'"></div>

ng-include写路径方式：

（1）<ng-include src="'views/sidepanel.html'"></ng-include>

  (2)  <div ng-include="'views/sidepanel.html'"></div>  一般静态加载某个页面

  (3)  <div ng-include src="'views/sidepanel.html'"></div>动态的加载一般采用第三种方式

6.angular ng-controller

绑定应用控制器，为$scope增强

抽离的nav.html中 ，设定ng-controller = "asideCtrl",

<nav ng-controller="asideCtrl">

  <ul class="nav">

     <li class="one-flag" ng-repeat="item in permissionList">

  </ul>

</nav>

，然后对应在应用中main.js中

angular.module('app')

.controller('AppCtrl', ['$scope', '$localStorage', '$window', 'LocalCache', '$state', '$rootScope','AgreeConstant', function($scope, $localStorage, $window, LocalCache, $state, $rootScope,AgreeConstant) {

.controller("asideCtrl", ['$scope', 'LocalCache',

      function($scope, LocalCache) {

        $scope.permissionList = angular.fromJson(LocalCache.getSession("permissionJson"))；

        };

      }

    ])

}

至此，nav.html就可以使用asideCtrl控制器中获取的$scope.permissionList 的值进行页面渲染。

7.angular ng-click

ng-click="reload(m.blockContentId)" 方法

ng-if="item.pageName"变量

ng-model="map.pageName"变量

8.angular json转换

var data = '{"procotol":"HTTP","host":"'+activateUrl+'","encrypt":false,"body":{"requestType":"PUT","tag":"'+activateUrl+'","upJson":{"activationCode":"'+$scope.activeCode.text+'"}}}'; //=====json字符串=====

angular.fromJson(data);  //===执行此操作转换成json对象

angualr.toJson("json字符串")//====执行此操作把json对象转换成json字符串

9.函数向上取整-Math.ceil

Math.ceil(3.5)==》向上取整4

10.获取页面元素

对应页面html中：

<div id="itemsDiv"></div>

对应js页面中：

var itemsDov = document.getElementById("itemsDiv");

 itemsDov.style.width = $scope.itemsData.length * 360 +"px";

11.元素定位

一、absolute绝对定位：

特点：

a.会从文档流中脱离，不受其他元素影响，定位是绝对的，绝对定位的元素在文档流中没有位置，从文档流中脱离了出来，会面的元素会填充掉它原来的位置。

b.定位位置相对于第一个具有定位属性(即：position为relative或者为absolute属性)的祖先元素。

当给元素设置绝对定位值时：

     该元素会延着DOM树向上查找，直到找到一个具有定位属性的祖先元素，则定位会相对于该元素。

     若祖先元素都没有定位属性，则会相对于body体进行定位

c.绝对定位的高级特性：

   具有自动伸缩功能，将width设置为auto(或不设置，默认为auto)，绝对定位元素会根据其left和right 自定伸缩其大小。例如：

注意：left、right必须要相等，且不超过其相对元素减去该绝对定位元素width的一半

absolute应用---左右居中设置,margin左右auto

(1)左右居中,定位元素会呈现居中状态，margin:0 auto +定宽+ 左右left、right相等：

{ position:absolute;  left:0;  right:0;  width:50px;  margin:0 auto;}

(2)定位元素占满父元素的宽度：

{ position:absolute;  left:0;  right:0 }

(3)优先取left值作为定位标识，结合width宽度显示

{ position:absolute;  left:0;  right:0; width:50px;  }

absolute应用---垂直居中设置,margin上下auto

{ position:absolute;  width:100px; height:50px;  margin:auto 0; top:0; bottom:0; }

二、相对定位 relative

特点：

a.相对定位指的是它原本在文档流中的位置而进行的偏移

b.使用相对定位时，无论是否进行移动，元素仍然占据原来的空间

c.一直相对的是它自身的初始位置

z-index 调整堆叠顺序，定位元素沿Z轴的位置，为正数则离用户更近，为负数，则离用户更远。

特点：拥有更高堆叠顺序的元素总是处于堆叠顺序较低的元素的前面，更靠近用户，可有负值，仅在定位元素上有效。z-index:1;靠近用户在前，z-index:-1远离用户，在后。

三、固定定位 fixed

特点：

a、元素position被设置为fixed时，这个元素就被固定住了，被固定的元素不会随着滚动条的拖动而改变位置，在视野中，元素的位置是不会改变的。

b、定位的是距离浏览器的位置，始终不变。

c 、常用于页面上的返回顶部按钮

{ position:fixed； top:30px;  left:160px; width: 60px;  height:60px;  }

12、浮动 float

概念：

设置了float属性的元素为浮动元素，浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。

包含块：浮动元素的包含块就是离浮动元素最近的块级祖先元素。

块级元素-block element：

每个块级元素默认占一行高度，一行内增加一个块级元素后，一般无法添加其他元素（元素浮动后除外），两个块级元素连续编辑时，会在页面自动换行显示，块级元素一般可嵌套块级元素或行内元素，宽度缺省为100%，除非设定宽度。

块级元素常见：address blockquote块引用、center居中对齐块 、dir-目录列表  div   dl-定义列表

form-交互表单、 h-标题、    hr-水平分界线、menu-菜单列表 、ol-有序列表  ul--无序列表 p--段落

pre--格式化文本  table--表格

内联元素-inline element：

和其他元素都在一行上，

高、行高、内边距、外边距不可改变，width、height无效，可设置line-height

宽度就是它的文字或者图片的宽度，不可改变，宽度随内容的变化而变化

margin只有 margin-left,margin-right有效，上下无效

padding只有padding-left,padding-right有效，上下无效

浮动元素的特性：

不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height ,    因此float常用作制作横向排列的菜单，可以设置大小并且横向排列。

浮动元素展示规则：

a、浮动元素在float的时候，其margin不会超过包含块的padding ,默认正常情况下不会超出，但也可控制浮动元素的margin为负值超出，碰撞到包含块的padding停止。

b、如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。

c、包含块元素的宽度足够大，两个元素一个向左float,一个向右float，互相无交集，

      如果父包含块的宽度小于两个浮动元素的宽度总和，一个左float,一个右float，那么后面的元素将会向下浮动，其顶端是前面浮动框的底端。

d.浮动元素的延伸性

如果浮动元素高度height大于父级元素，只要将父元素也设置成浮动即可，父元素设置为float以后，该元素会进行延伸进而包含所有浮动的子元素。

e.clear属性，确保当前元素的左右两侧不会有浮动元素

    我们不希望一些元素被旁边的浮动元素影响到，就要用clear属性，clear属性只对元素本身的布局起作用。例：

<div style="float:left">浮动元素1</div>

<div style="float:left">浮动元素2</div>

<div style="float:left">浮动元素3</div> 现在要让元素2另起一行展示，那么要设置元素2的css属性增加“clear:left;”确保元素2的左侧不被浮动元素影响。

f.float-清除浮动

高度塌陷：

一个块级元素如果没有设置height,那么其height是由子元素撑开的，子元素使用了float以后，子元素就会脱离标准文档流，父级元素中没有内容可以撑开其高度，父级元素的高度会被忽略，造成高度塌陷。

解决方式:

方式1：增加额外的div,在父级元素的内容中增加一个（作为最后一个子元素）

<div style="clear:both"></div>,但是这样造成资源浪费！

方式2：在父级元素上增加属性 overflow:hidden;    

              缺点：如果子元素超出了父元素的范围，造成超出的部分被隐藏！

方式3：after伪元素，在父元素上添加下面两个属性

.clearfix:{zoom:1};

.clearfix:after{ display:block;  content:'';  clear:both;  height:0;  visibility:hidden; };

用法：

<div  class="xxxxx  clearfix">xxxx</div>