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}}">