Angular js 学习文档

Angular js 指令:

ng-app=””  初始化一个Angularjs应用程序

ng-init=”key=value” 在其中使用键值对定义数据

{{key}} 在html中使用key调用数据

ng-bind=”key” 可以在标签中使用此方法调用数据 相当于append

ng-model 把元素值绑定到应用程序 一般出现在文本框中 定义key 然后把输入的值显示

Ng-model同样可以为应用程序数据提供类型验证、为应用程序提供状态、为html元素提供css类、绑定html元素到html表单

Ng-repeat 循环数组  把数组中的元素循环放在html中 相当于for

页面代码:

        名:

        姓:

       

        姓名{{fullname()}}

   

AngularJs代码:

var app = angular.module("myApp", []);

app.controller('personCtrl', function ($scope) {

    $scope.firstname = "John";

    $scope.lastname = "Doe";

    $scope.fullname = function () {

        return $scope.firstname + " " + $scope.lastname;

    }

})

其中 app是anjularjs的作用域

app.controller是定义控制器中的具体操作

 

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $location) {

    $scope.myUrl = $location.absUrl();

});

通过内建的$location服务获取当前页面的URL

 

 

       

           

               

               

               

           

           

               

               

               

           

       

编号 姓名 年龄
{{x.ID}} {{x.Name}} {{x.Age}}

通过get/post 获取后台的数据 然后通过ng-repeat循环遍历数据放入页面

相当于使用ajax获取数据 然后通过拼接字符串放入Dom节点中(推荐使用

 

$timeout 访问在规定的毫秒数后执行指定函数。

$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。

 

   app.service('change', function () {

            this.myFunc = function (x) {

                return x.toString(16);

            }

        });

        app.controller('myCtrl', function($scope,change) {

            $scope.hex = change.myFunc(255);

        })

自定义服务并调用 change:服务名称 myFunc:服务具体执行函数

页面中使用多个angular js 在中加入ng-app 在

中加入ng-controller

 

 app.service('change', function () {

            this.myFunc = function (x) {

                return x.toString(16);

            }

        });

        app.filter('myFormat', ['change', function (change) {

            return function (x) {

                return change.myFunc(x);

            }

        }]);

        app.controller('myCtrl1', function ($scope) {

            $scope.counts = [255, 251, 200];

        });

 

 

       

               

  • {{y|myFormat}}
  •        

 

通过filter创建验证 myFormat为验证名称 change为验证方法名称 myFunc为具体验证方法

通过{{y|myFormat}}使用

通过此行代码代码可以将数据绑定到下拉框

绑定json

angularjs表格:

可以通过orderBy过滤器进行排序

使用{{$index+1}}作为序号

使用$even和$odd可以进行按首字母顺序排列

 

表单验证:使用ng-show显示验证信息 验证属性如下:

Angular js 学习文档_第1张图片

 

 

angular js api

Angular js 学习文档_第2张图片

你可能感兴趣的:(JS)