Separes
Separes

AngularJS常用功能与使用

1. ng-app:

初始化一个AngularJS应用程序，定义其根元素；
一个网页可以包含多个运行在不同元素中的AngularJS应用程序；

2. ng-init:

初始化应用程序的数据；
例：

3. ng-bind：

把应用程序数据绑定到HTML；
例：



姓名为

注：可在双大括号内直接绑定数据到HTML，如“ {{ 1+2 }} ”

4. ng-model:

把元素值绑定到应用程序；
例：

< p>姓名：


你输入的为： {{ Name }}

5. ng-repeat：

循环；
例：



  • 
    {{ x }}

    • 注：输出对象数组时可使用“ . ”符号输出对象属性，类似PHP中的“ -> ”符号；
    该指令可以完美显示表格(可以添加过滤)；

    6. ng-click：

    定义一个单击事件；
    例：

    
< p>{{ count }}

    注：ng-dbclick：定义一个双击事件；
    与之类似的还有 ng-mousedown，ng-mouseup，ng-mouseenter，ng-mouseleave，ng-mousemove，ng-mouseover，ng-submit等；

    7. ng-hide：

    隐藏应用的一部分；
    例：

    注：ng-show与ng-hide作用相反；

    8. ng-disable：

    绑定应用程序数据到HTML的disable属性；
    例：

    9. 过滤：

    1.filter        从数组匹配子串
2.orderBy       根据某个条件排列数组
3.lowercase     将字符串转为小写
4.uppercase     将字符串转为大写
5.currency      将数字格式化为货币
6.date          日期格式化
7.json          把一个JavaScript对象格式化为没有参数的Json字符串
8.limitTo       截取数组或字符串
9.number        格式化数字

    注：过滤可嵌入ng-repeat中使用以得到目标数据；
    例：

  • 
{{ (x.name | uppercase) + ', ' + x.country }}

    • 10. ng-controller：

    定义应用程序控制器；

    • 控制器控制其应用程序的数据；
    • 控制器是常规的JavaScript对象，由标准的JavaScript对象的构造函数创建；
    • 控制器的 $scope 是其指向的HTML元素；
      例：

      名:

      姓:



      姓名: {{person.firstName + " " + person.lastName}}


      注：控制器可以把函数作为对象属性；
      控制器可以带有方法；

    11. $http：

    $http是读取web服务器上数据的服务；
    $http.get(url)是用于读取服务器数据的函数；
    例：

    function controller($scope,$http) {
$http.get('av/av.json')
.success(function(response) {$scope.names = response;});
}

    注：获得Json数据时，属性$scope.names变为一个数组；

    12. ng服务：

    1.$scope        与指令元素相关联的当前作用域(存储数据)
2.$rootScope    某模块的根作用域(唯一)，由AngularJS加载模块时自动创建，其定义的值可在各个controller中使用；
3.$element      当前指令对应的元素
4.$attrs        由当前元素的属性组成的对象
5.$transclude   不清楚

    13. then()方法：

    一个很神奇的方法，用于处理异步请求($http不支持异步请求)；
    then()中的方法会按顺序执行；
    then(fn)方法中带一个参数，即要被执行的函数，且该函数自身的参数即为目标数据；
    例：

        $Employee.get({id:$stateParams.employee}).$promise.then(function (employee) {
    if ($window.confirm('确定让' + employee.name + '离职吗？')) {
    $Employee.delete($Employee.get({id:$stateParams.employee}));
    $state.go('shadow.employee.list');
    } else {
    $state.go('shadow.employee.inspect', {employee: $stateParams.employee});
        }
    })

    注：promise模式是一个带有then()函数的对象；

    14. select & ng-options:

    select:取值、选中等；
    ng-options：输出下拉框；
    注：可用select自定义option的value值；
    例：