本文共 2692 字,大约阅读时间需要 8 分钟。
AngularJs
1. 表达式{ {5+3}}
2. 指令 ng-app 指令初始化一个 AngularJS应用程序,ng-init指令初始化应用程序数据,ng-model 指令把元素值(比如输入域的值)绑定到应用程序,ng-if。
3. 控制器ng-controller <div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br><br> 姓名: { {fullName()}}</div><script> varapp = angular.module('myApp', []); app.controller('personCtrl',function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } });</script>4. 过滤器 |
currency | 格式化数字为货币格式。 |
filter | 从数组项中选择一个子集。 |
lowercase | 格式化字符串为小写。 |
orderBy | 根据某个表达式排列数组。 |
uppercase | 格式化字符串为大写。 |
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 { { lastName | uppercase }}</p> </div>5. http $http.get(url) 是用于读取服务器数据的函数。
<div ng-app="myApp" ng-controller="customersCtrl">
<ul> <li ng-repeat="x in names"> { { x.Name + ', ' + x.Country }} </li></ul></div><script> varapp = angular.module('myApp', []); app.controller('customersCtrl',function($scope, $http) { $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php") .success(function(response) {$scope.names = response.records;}); });</script>6. dom操作 ng-disabled不可用 ng-show显示 ng-hide隐藏
7. 事件ng-click
8. 表单验证 novalidate去除浏览器默认验证,required采用angular验证
属性 | 描述 |
$dirty | 表单有填写记录 |
$valid | 字段内容合法的 |
$invalid | 字段内容是非法的 |
$pristine | 表单没有填写记录 |
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required> <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">邮箱是必须的。</span> <span ng-show="myForm.email.$error.email">非法的邮箱。</span> </span></p><p>
<input type="submit" ng-disabled="myForm.user.$dirty&& myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid"></p></form>
<script> varapp = angular.module('myApp', []); app.controller('validateCtrl',function($scope) { $scope.user = 'John Doe'; $scope.email = 'john.doe@gmail.com'; });</script>9. Api函数
API | 描述 |
angular.lowercase() | 转换字符串为小写 |
angular.uppercase() | 转换字符串为大写 |
angular.isString() | 判断给定的对象是否为字符串,如果是返回 true。 |
angular.isNumber() | 判断给定的对象是否为数字,如果是返回 true。 |
<div ng-app="myApp" ng-controller="myCtrl">
<p>{ { x1 }}</p><p>{ { x2 }}</p></div><script> varapp = angular.module('myApp', []); app.controller('myCtrl',function($scope) { $scope.x1= "JOHN"; $scope.x2= angular.lowercase($scope.x1); });</script>10.包含
<div class="container">
<div ng-include="'myUsers_List.htm'"></div> <div ng-include="'myUsers_Form.htm'"></div></div>
11. 引用
当使用angular数据地址时,要用ng-src,ng-href,而不能使用src,href,因为angularjs是在html加载完才会加载。
imgng-src="{ {phone.imageUrl}}">
转载地址:http://qcgma.baihongyu.com/