Angular 中常用指令理解

2017-03-26 本文已影响200人 fangtang0101

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>