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