查看: 85|回复: 0

angular 课堂笔记,类绑定,样式的绑定,Ng-if,Ng-switc..

发表于 2018-1-10 14:53:51
类绑定ng-class在angular中绑定类大致三种情况第一种传递一个对象,对象的属性名称就是类的名称,对象属性值是一个布尔值,true保留这个类...
类绑定ng-class
在angular中绑定类大致三种情况

第一种传递一个对象,

对象的属性名称就是类的名称,

对象属性值是一个布尔值,

true保留这个类,

false删除这个类

第二种 传递一个变量

变量的值就是类的名称

第三种传递一个数组,

数组中给每个成员表示一个类的名称

无论是变量还是数组中的成员,我们可以写字符串,(字符串要有‘’)

1 <button ng-click="getX()">投色子</button>

2 <div ng-class="{red: x > 3, green: x <= 3}">{{x}}</div>

3 <div ng-class="'green'">div</div>

<div ng-class="[firstCls, 'h300']">div 3</div>

样式的绑定绑定样式只有两种第一种方式 传递一个对象

对象的属性名称表示样式的属性名称

对象的属性值表示样式的属性值

第二种传递一个变量

这个变量时一个对象

对象的属性名称表示样式名称

对象的属性值,表示样式的属性

Angular与vue不同 是,它不能接受一个数组

1 <button ng-click="getX()">投色子</button>

2 <div ng-class="{red: x > 3, green: x <= 3}">{{x}}</div>

3 <!-- 宽度要根据x决定 -->

4 <div ng-class="'green'" ng-style="{width: 100 * x + 'px'}" >div</div>

<div ng-class="'red'" ng-style="styl" >div2</div>
Ng-ifNg-show,ng-hide,来显隐一个元素,实现原理是通过类实现

Ng-if来决定元素是否创建

True显示这个元素

False隐藏这个元素

Angular根据页面中注释位置来决定元素的创建位置
  

1 <button ng-click="showFirst = !showFirst">toggle</button>

2 <h1 ng-if="showFirst">商品详情1</h1>

<h1 ng-if="!showFirst">用户评论2</h1>

Ng-switch

Ng-switch 可以控制多个页面的切换

On 绑定一个控制变量

Ng-switch-defautl 设置默认页面

Ng-switch-when 当满足when条件适合,渲染该页面

注意:不论你设置多少Ng-switch-when,或者Ng-switch-defautl 那么只能同时显示一个页面

1 <div ng-switch on="msg">

2 <h1 ng-switch-default>第一个页面</h1>

3 <h1 ng-switch-when="second">第二个页面</h1>

4 <h3 ng-switch-when="third">第三个页面</h3>

</div>

循环渲染模板指令

Ng-repeat 参数使用方式vue中v-for是一样的

Ng-repeat=“item in list”

$index 循环的次数 从0开始计数

$first 是否是第一次,boolean

$last 是否是最后一次 boolean

$middle 是否是中间一次(除了首位) boolean

$even 偶数次 boolean

$odd 奇数次 boolean

1 <ul ng-repeat="item in colors">

2 <li ng-class="{gray: $even, green: $last, red: $first}">{{item}} index-{{$index}} even-{{$even}}  odd-{{$odd}} first-{{$first}} last-{{$last}} middle-{{$middle}}</li>

</ul>

Ng-include 动态加载模板的

原理是通过异步请求实现,所以我们要创建一个服务器

它的值是文件的路径,是个字符串或者变量

<div ng-controller="main" ng-include="tpl"></div>

本文章版权归爱创课堂所有,转载请注明出处。

更多详细内容请访问爱创课堂官网首页

http://www.icketang.com/



相关热词搜索:[color=rgb(14, 98, 192) !important]课堂笔记
上一篇:Angular作用域
下一篇:[url=]最后一页[/url]
延伸阅读:
  • ·爱创课堂前端培训 AngularJS angular简介(2017-11-02)
  • ·爱创课堂前端培训 AngularJS 多分支模板指令(2017-11-03)
  • ·爱创课堂前端培训 AngularJS 自定义指令(2017-11-03)
  • ·爱创课堂前端培训 AngularJs 自定义观察者模式服务(2017-11-06)
  • ·爱创课堂前端培训 AngularJs 项目实战(2017-11-06)




回复

使用道具 举报