AngularJS常用功能与使用

1. ng-app:

初始化一个AngularJS应用程序,定义其根元素;
一个网页可以包含多个运行在不同元素中的AngularJS应用程序;

2. ng-init:

初始化应用程序的数据;
例:

<div ng-app="MyApplication" ng-init="name='Separes'">

3. ng-bind:

把应用程序数据绑定到HTML;
例:

<div ng-app="" ng-init="Name='Separes'">
<p>姓名为 <span ng-bind="Name"></span></p>

注:可在双大括号内直接绑定数据到HTML,如“ {{ 1+2 }} ”

4. ng-model:

把元素值绑定到应用程序;
例:

< p>姓名:<input type="text" ng-model="Name"></p>
<p>你输入的为: {{ Name }}</p>

5. ng-repeat:

循环;
例:

<div ng-app="" ng-init="rows=['A','B','C']">
<li ng-repeat="x in rows">
    {{ x }}

注:输出对象数组时可使用“ . ”符号输出对象属性,类似PHP中的“ -> ”符号;
该指令可以完美显示表格(可以添加过滤);

6. ng-click:

定义一个单击事件;
例:

<button ng-click="count = count + 1"></button>
< p>{{ count }}</ p>

注:ng-dbclick:定义一个双击事件;
与之类似的还有 ng-mousedown,ng-mouseup,ng-mouseenter,ng-mouseleave,ng-mousemove,ng-mouseover,ng-submit等;

7. ng-hide:

隐藏应用的一部分;
例:

<p ng-show="true">

注:ng-show与ng-hide作用相反;

8. ng-disable:

绑定应用程序数据到HTML的disable属性;
例:

<button ng-disabled="Switch"></button>

9. 过滤:

1.filter        从数组匹配子串
2.orderBy       根据某个条件排列数组
3.lowercase     将字符串转为小写
4.uppercase     将字符串转为大写
5.currency      将数字格式化为货币
6.date          日期格式化
7.json          把一个JavaScript对象格式化为没有参数的Json字符串
8.limitTo       截取数组或字符串
9.number        格式化数字

注:过滤可嵌入ng-repeat中使用以得到目标数据;
例:

<li ng-repeat="x in names | filter:name | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}

10. ng-controller:

定义应用程序控制器;

  • 控制器控制其应用程序的数据;
  • 控制器是常规的JavaScript对象,由标准的JavaScript对象的构造函数创建;
  • 控制器的 $scope 是其指向的HTML元素;
    例:
    <div ng-app="" ng-controller="personController">
    名: <input type="text" ng-model="person.firstName">

    姓: <input type="text" ng-model="person.lastName">



    姓名: {{person.firstName + " " + person.lastName}}
    </div>
    <script>
    function personController($scope) {
    $scope.person = {
    firstName: "John",
    lastName: "Doe"
    };
    }
    </script>
    注:控制器可以把函数作为对象属性;
    控制器可以带有方法;

11. $http:

$http是读取web服务器上数据的服务;
$http.get(url)是用于读取服务器数据的函数;
例:

function controller($scope,$http) {
$http.get('av/av.json')
.success(function(response) {$scope.names = response;});
}

注:获得Json数据时,属性$scope.names变为一个数组;

12. ng服务:

1.$scope        与指令元素相关联的当前作用域(存储数据)
2.$rootScope    某模块的根作用域(唯一),由AngularJS加载模块时自动创建,其定义的值可在各个controller中使用;
3.$element      当前指令对应的元素
4.$attrs        由当前元素的属性组成的对象
5.$transclude   不清楚

13. then()方法:

一个很神奇的方法,用于处理异步请求($http不支持异步请求);
then()中的方法会按顺序执行;
then(fn)方法中带一个参数,即要被执行的函数,且该函数自身的参数即为目标数据;
例:

    $Employee.get({id:$stateParams.employee}).$promise.then(function (employee) {
    if ($window.confirm('确定让' + employee.name + '离职吗?')) {
    $Employee.delete($Employee.get({id:$stateParams.employee}));
    $state.go('shadow.employee.list');
    } else {
    $state.go('shadow.employee.inspect', {employee: $stateParams.employee});
        }
    })

注:promise模式是一个带有then()函数的对象;

14. select & ng-options:

select:取值、选中等;
ng-options:输出下拉框;
注:可用select自定义option的value值;
例:

<select ng-model="vm.selectVal" ng-options="o.title for o in vm.optionsData">

15. 输入校验:

1.ng-trim           去除空格       value = boolean
2.ng-min-length     最小长度       value = num
3.ng-max-length     最大长度       value = num
4.required          不为空         value = null
5.ng-pattern        正则验证       value = string

16. 分支语句:

同JavaScript;
if...else...
switch...case...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,923评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,154评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,775评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,960评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,976评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,972评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,893评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,709评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,159评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,400评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,552评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,265评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,876评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,528评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,701评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,552评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,451评论 2 352

推荐阅读更多精彩内容