Angular js 学习文档

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liuzishang/article/details/83538870

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

页面代码:

<div ng-app="myApp" ng-controller="personCtrl">

        名:<input type="text" ng-model="firstname" name="name" value=" " /><br />

        姓:<input type="text" ng-model="lastname" name="name" value=" " /><br />

        <br />

        姓名{{fullname()}}

    </div>

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

 

<script>

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

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

            $http.post("/Home/ReturnJson")

.success(function(response) {$scope.num = respose.data;

});

        })

</script>

 <div ng-app="myApp" ng-controller="myCtrl">

        <table>

            <tr>

                <td>编号</td>

                <td> 姓名</td>

                <td>年龄</td>

            </tr>

            <tr ng-repeat="x in num">

                <td> {{x.ID}}</td>

                <td> {{x.Name}}</td>

                <td> {{x.Age}}</td>

            </tr>

        </table>

</div>

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

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

 

<script>

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

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

            $scope.myHeader = "Hello World";

            $timeout(function() {

                $scope.myHeader = "How are you today?";

            },2000)

        })

</script>

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

<script>

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

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

            $interval(function() {

                $scope.theTime = new Date().toLocaleTimeString();

            },1000)

        })

</script>

$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 在<body>中加入ng-app 在<div>中加入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];

        });

 

 <div ng-controller="myCtrl1">

        <ul ng-repeat="y in counts">

            <li>{{y|myFormat}}</li>

        </ul>

</div>

 

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

通过{{y|myFormat}}使用

<select ng-model="selectedName" ng-options="x for x in json"></select> 通过此行代码代码可以将数据绑定到下拉框

<select ng-model="selectedsite" ng-options="x.site for x in json"></select>绑定json

angularjs表格:

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

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

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

 

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

 

 

angular js api

猜你喜欢

转载自blog.csdn.net/liuzishang/article/details/83538870