博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angular框架
阅读量:6369 次
发布时间:2019-06-23

本文共 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/

你可能感兴趣的文章
Mysql索引的类型
查看>>
Eclipse debug模式 总是进入processWorkerExit
查看>>
Nginx的https配置记录以及http强制跳转到https的方法梳理
查看>>
[每天五分钟,备战架构师-1]操作系统的类型和结构
查看>>
springcloud(十三):Eureka 2.X 停止开发,但注册中心还有更多选择:Consul 使用详解...
查看>>
关于Boolean类型做为同步锁异常问题
查看>>
TestLink运行环境:Redhat5+Apache2.2.17+php-5.3.5+MySQL5.5.9-1
查看>>
Get File Name from File Path in Python | Code Comments
查看>>
显示本月每一天日期
查看>>
[转]java 自动装箱与拆箱
查看>>
NET的堆和栈04,对托管和非托管资源的垃圾回收以及内存分配
查看>>
think in coding
查看>>
IdHttpServer实现webservice
查看>>
HTML的音频和视频
查看>>
Unsupported major.minor version 52.0
查看>>
面对对象之差异化的网络数据交互方式--单机游戏开发之无缝切换到C/S模式
查看>>
优酷网架构学习笔记
查看>>
把HDFS里的json数据转换成csv格式
查看>>
WEEX-EROS | 集成并使用 bindingx
查看>>
广州牵引力来告诉你学编程先学什么语言好?
查看>>