01.angular指令

angular指令

一.指令

1.ng-app :

这个指令定义了一个Angular.js的应用程序,类似vue中的id="app",可以在绑定了ng-app的这个div标签内进行数据渲染的其他操作

​

<div ng-app=""> 
    <p>名字 : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
    <p ng-bind="name"></p>
</div>

2.angular数据相关指令

1.ng-bind ng-model 数据绑定(包含双向绑定)

ng-bind是针对于元素,后面绑定的值会作为标签的数据显示,

ng-model是针对于表单元素,

<div ng-app="">
        <input type="text" ng-model="name">
        <p ng-bind="name"></p>
        <p>{{name}}</p>
</div>

 

2.ng-init初始化(不常用)

ng-init是用来初始化需要用到的变量的值

<h3 ng-init="age=19">{{age}}</h3>
<input type="text" ng-model="age">

 

vue中的数据是定义在data中的 ,angular可以通过ng-init将数据定义在标签上

3.ng-repeat和ng-for 循环相关

对某个元素的循环,针对于集合中到的每个项克隆一次HTML元素

<ul >
     <li ng-repeat="x in [1,2,3,4]">
        {{x}}
     </li>
</ul>

　　

 <li *ngFor="let item of selectList;let key=index">    {{item}} 
   <button class="del"(click)="toDel(key)">X</button> 
   </li>

　　

let key = index 获取循环的索引值,后面会用到.

 

4.angular样式相关指令

1.ngClasss动态添加css类

<p *ngFor="let item of datas;let key=index" [ngClass]="{red: key%2==0, pink:key%2!==0}">
      {{item}}
</p>

　　

[ngClass]={类名:布尔值/布尔表达式}

也可以用使用自定义事件比如

<p *ngFor="let item of datas;let key=index" [ngClass]=setCss()>
      {{item}}
</p>
​
setCss (){
    return "{red: key%2==0, pink:key%2!==0}"
}

　　

2.内联样式[ngStyle]

<p [ngStyle]="{color:red,width:200px}"></p>
<p [ngStyle]="setStyle"></p>
​
setStyle(){
    return {color:red,width:200px}
}

　　

3.使用class指令实现单个css类绑定

<p [class.style01]= true></p>

　　

.style01 {
    color:red;
    width:200px
}