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
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http.post("/Home/ReturnJson")
.success(function(response) {$scope.num = respose.data;
});
})
编号 | 姓名 | 年龄 |
{{x.ID}} | {{x.Name}} | {{x.Age}} |
通过get/post 获取后台的数据 然后通过ng-repeat循环遍历数据放入页面
相当于使用ajax获取数据 然后通过拼接字符串放入Dom节点中(推荐使用)
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $timeout) {
$scope.myHeader = "Hello World";
$timeout(function() {
$scope.myHeader = "How are you today?";
},2000)
})
$timeout 访问在规定的毫秒数后执行指定函数。
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $interval) {
$interval(function() {
$scope.theTime = new Date().toLocaleTimeString();
},1000)
})
$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 在
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];
});
通过filter创建验证 myFormat为验证名称 change为验证方法名称 myFunc为具体验证方法
通过{{y|myFormat}}使用
通过此行代码代码可以将数据绑定到下拉框
绑定json
angularjs表格:
可以通过orderBy过滤器进行排序
使用{{$index+1}}作为序号
使用$even和$odd可以进行按首字母顺序排列
表单验证:使用ng-show显示验证信息 验证属性如下:
angular js api