Angular 中常用指令理解

1. ng-change

input 等html元素 有改变的时候的调用

2. ng-model

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。 相当于绑定 input 绑定中的 值
备注:后面可以接变量 ,也可以接表达式

3. ng-options

点击下拉列表
使用数组元素填充下拉列表:
备注:
item as item.compText 显示的时候是显示 item.compText 字段

 <select ng-change="changeComp();" ng-model="comp" ng-options="item as item.compText for item in comps"></select>

4. ng-bind

指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。
如果给定的变量或表达式修改了,指定替换的 HTML 元素也会修改。
备注:可以绑定的内容有很多
a. 变量

  <span ng-bind="year.year"></span>

b. 函数,以及表达式

  <div class="date-picker" ng-click="datePlugin();" ng-bind="pickerResult();">2016-08-15 星期一</div>

c.多次filter,就是多次过滤

 <span ng-bind="yearPicker[yearIndex].year"></span>年<span ng-bind="monthIndex | parseMonth"></span>月

与{{}}意义差不多,但是推荐使用 ng-bind

<p>{{text}}</p> 未被渲染的模板可能会被用户看到

<p ng-bind="text"></p>

d.变量加固定的值,就是以字符串拼接

  <div class="title-div" ng-bind="employeeInfo.empName + '调休'"></div>

5. ng-repeat

ng-repeat 指令用于循环输出指定次数的 HTML 元素。
集合必须是数组或对象
其实就是 for 循环

                   <div class="body-class" ng-repeat="item in bodyClasses">
                        <div ng-class="bodyClassChoseIndex == $index ? 'selected' : ''" ng-bind="item.name" ng-click="selectBodyClass($index);"></div>
                    </div>
                    <div class="clear"></div>
                </div>

备注:如 代码中显示的 在 下级的 div 中,循环的内容是继续可以在使用的,下级中可以继续使用 item $index 表示当前obj在数组中的 位置
扩展:关于在 数组中先 刷选出 一部分符合条件的数组,然后再进行循环====> 可以在后面加filter,但是要避免$index 的bug
参看下面的一篇文章
http://blog.csdn.net/renfufei/article/details/43061877

6.ng-style (还需要具体再看)

添加样式
使用AngularJS添加样式,使用 CSS key=>value 对象格式:

  <div class="reserve-tooltip-arrow" ng-style="timeUnit | tooltipArrowStyle:times.length:$parent.$index:employeeReserves.length"></div>
   <div ng-style="employeesChose | employeesChoseWrapper">
 <div class="boxes" ng-style="pending.timeUnit.reserves | listWidth:1">
<h1 ng-style="myObj">菜鸟教程</h1>
<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-style="myObj">菜鸟教程</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.myObj = {
        "color" : "white",
        "background-color" : "coral",
        "font-size" : "60px",
        "padding" : "50px"
    }
});
</script>
</body>

7.ng-mouseenter

a.在鼠标指针穿过元素时执行表达式:
b.ng-mouseenter 指令不会覆盖元素的原生 onmouseenter 事件, 事件触发时,ng-mouseenter 表达式与原生的 onmouseenter 事件将都会执行。
备注:可以是控制一个表达式,也可以是改变一个变量的值,从而发生一系列相应的变化

  <td ng-class="timeUnit | unitClass" ng-repeat="timeUnit in employee.timeUnits" ng-style="timeUnit | unitWidth" ng-click="timeUnitClickHandler(employee, timeUnit, $index);" ng-mouseenter="timeUnit.showTip = true;" ng-mouseleave="timeUnit.showTip = false;">

8.ng-src

ng-src 指令覆盖了 img 元素的 src 属性。
就是绑定 img 的链接src

  <img ng-src="{{item.designerAvatar | formatImg:180:200:'http://static.bokao2o.com/noimg.png'}}"/>

9.ng-init

初始化应用时创建一个变量

<div ng-app="" ng-init="myText='Hello World!'">

<h1>{{myText}}</h1>

10.ng-class

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。
指令的值可以是字符串,对象,或一个数组。
a.函数

 <div ng-class="dayCSS(day);" ng-repeat="day in datePicker" ng-click="chooseDate(day, $index);">

b.表达式

  <div ng-class="refreshEnable ? 'caption-button refresh' : 'caption-button disable'" ng-click="refresh();">
 <div ng-class=" currentItem.isJob && !currentItem.empAssigned ? 'box-item select-field' : 'box-item'">

c.filter

     <td ng-class="timeUnit | unitClass" ng-repeat="timeUnit in employee.timeUnits" ng-style="timeUnit | unitWidth" ng-click="timeUnitClickHandler(employee, timeUnit, $index);" ng-mouseenter="timeUnit.showTip = true;" ng-mouseleave="timeUnit.showTip = false;">

d.字符串拼接

 <td ng-class="'unit' + (timeUnit.hasReserve ? ' before' : '')" ng-repeat="timeUnit in employee.timeUnits" ng-click="timeUnitClickHandler(employee, timeUnit, $index);">

e.可以返回数组(以字符串的形式拼接)

 <div ng-class="interval == 60 ? 'interval chose' : 'interval'" ng-click="switchInterval(60);">60分钟</div>

f.可以是一个对象

   <li ng-repeat="time in times" ng-bind="time" class="daysList-div" ng-class="{'1':'select-div','0':'normal-div','2':'unable-div'}[queryIncludeEmp(time)]" ng-click="selectDays(time,$index)"></li>

11. ng-show

ng-show 指令在表达式为 true 时显示指定的 HTML 元素,否则隐藏指定的 HTML 元素
注意是隐藏,不是移除

 <img ng-show="timeUnit.chose" class="img-check" src="//static.bokao2o.com/images/managerAdmin/managerAdmin_joinBg.png"/>
 <div ng-show="timeUnit.hasReserve && timeUnit.reserve.status != 2 && timeUnit.showTip" class="reserve-tooltip" ng-style="timeUnit | tooltipStyle:times.length:$parent.$index:employeeReserves.length">

12. ng-if

如果 if 语句执行的结果为 true,会添加移除元素,并显示。
注意是移除

  <div ng-if="currentItem.isEmployee || (currentItem.isJob && currentItem.empAssigned)" class="value" ng-bind="currentItem.empName"></div>
<div ng-if="currentItem" class="value" ng-bind="currentItem.jobTitle"></div>

ng-if 与 ng-show 的区别
http://m.blog.csdn.net/article/details?id=44701769

13.ng-click

添加点击事件(可以给任何一个div)

<div class="button confirm" ng-click="seeReserveConfirm();" ng-bind="(currentItem.isJob && !currentItem.empAssigned) ? '员工分配' : '客户到店'"></div>
<button ng-click="count = count + 1" ng-init="count=0">OK</button>

好的用法

 <div class="arrow up" ng-click="changeSort(-1);"></div>
                    <div class="arrow down" ng-click="changeSort(1);"></div>

14.ng-blur

当输入框失去焦点(onblur)时执行表达式:

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

推荐阅读更多精彩内容